jQuery动画---显示、卷动、淡入淡出

最新推荐文章于 2024-09-02 12:36:07 发布

转载最新推荐文章于 2024-09-02 12:36:07 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/684493

文章标签：

#javascript #ViewUI

本文介绍了jQuery中动画效果的实现方式，包括基本的显示与隐藏、队列动画、卷动及淡入淡出等效果，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示和隐藏

show()/hide() 显示和隐藏

动画显示

可以加时间参数，标志显示或者隐藏的快慢，单位为毫秒。还有三个预设的速度：slow、normal 和 fast，分别对应 600 毫秒、400 毫秒和 200 毫秒。
如果传递的时间不符合格式要求或者为空字符串，那个将采用normal

$(":button:eq(0)").click(function(){
    $("div:eq(0)").show(500);
});
$(":button:eq(1)").click(function(){
    $("div:eq(0)").hide(500);
});

回调函数

动画执行完毕后，紧接着执行回调函数。这里如果不写time则依然有速度，速度为normal
show(time,fun)

$("div:eq(0)").show(500,function(){
    alert("显示完成");
});

队列动画

在一个动画执行完后，调用另一个动画，由此实现队列动画。采用递归自动遍历所有需要操作的元素。

$(":button:eq(0)").click(function(){
    $("div").first().show(100,function test(){
        $(this).next().show(100,test);
    });
});
$(":button").last().click(function(){
    $("div").last().hide(100,function test1(){
        $("div:visible").last().hide(100,test1);
    });
});

也可以使用arguments.callee表示匿名函数的引用
arguments.callee的用法参考 js函数

$(":button:eq(0)").click(function(){
    $("div").first().show(100,function (){
        $(this).next().show(100, arguments.callee);
    });
});
$(":button").last().click(function(){
    $("div").last().hide(100,function (){
        $("div:visible").last().hide(100, arguments.callee);
    });
});

toggle()

在show和hide之间自动切换

$(":button:eq(2)").click(function(){
    $("div").toggle(200);
});

卷动

用法与show/hide类似，具体方法如下：
- slideUp() 向上卷起
- slideDown() 向下展开
- slideToggle() 自动切换

$(":button:eq(0)").click(function(){
    $("div").slideUp('slow');
});
$(":button:eq(1)").click(function(){
    $("div").slideDown('slow');
});
$(":button:eq(2)").click(function(){
    $("div").slideToggle('slow');
});

淡入淡出

与show类似，具体方法如下：
- fadeIn() 淡入
- fadeOut() 淡出
- fadeToggle() 自动切换
- fadeTo() 指定透明度(0-1)

$(":button:eq(0)").click(function(){
    $("div").fadeIn('slow');
});
$(":button:eq(1)").click(function(){
    $("div").fadeOut('slow');
});
$(":button:eq(2)").click(function(){
    $("div").fadeToggle('slow');
});
$(":button:eq(2)").click(function(){
    $("div").fadeTo('slow',0.5);
});