jQuery实现全局调用折叠动画效果

很早我就写好了这些代码,也优化了好几次,主要是为了提升项目的开发速度。jquery有三种折叠效果,主要是toggle,fadetoggle,以及slidetoggle,它们共同实现了相似但是不同的界面效果,十分好用。但是如果网站上需要有大量的折叠实现,每个地方都写不同的js代码来实现,会变成非常累赘,所以一个全局的调用方法很有必要,一方面精简代码,另一方面提升开发速度。
主要代码如下(需要引入jQuery):

$(function(){
    //折叠效果
    $("body").on("click",".toggle",function () {
        var todiv = $(this).attr("data-toggle");
        var totime = $(this).attr("data-toggle-time");
        $(todiv).fadeToggle(totime);
    });
    $("body").on("click",".fadetoggle",function () {
        var todiv = $(this).attr("data-toggle");
        var totime = $(this).attr("data-toggle-time");
        $(todiv).fadeToggle(totime);
    });
    $("body").on("click",".slidetoggle",function () {
        var todiv = $(this).attr("data-toggle");
        var totime = $(this).attr("data-toggle-time");
        $(todiv).fadeToggle(totime);
    });
});

大概的含义就是,获取自定义属性data-toggle和data-toggle-time,它们分别对应需要操控的折叠对象(可以是id可以是class,但是id必须唯一)和需要的时间。

所以Html的实例如下:

<a href="javascript:;" class="toggle" data-toggle=".box" data-toggle-time="200">折叠点击触发</a>
<div class="box">
要折叠的对象
</div>

总之,点击触发的对象必须设保护class,从toggle,fadetoggle,slidetoggle总选择任意一个效果,不能重复。data-toggle中设置操控的对象,如果对象是class就是.box,如果对象是id就是#box,非常简便。

附上我的前端框架项目地址(主要是自用,可以参考):

此处内容需要评论回复后方可阅读o(╯□╰)o

发表评论
加载中...

相关文章