jQuery动画

原创于 2022-05-21 21:44:25 发布 · 213 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了jQuery中的各种动画效果，包括显示与隐藏、滑上滑下、淡入淡出、自定义动画和停止动画。通过示例代码展示了如何使用show(), hide(), toggle(), slideUp(), slideDown(), fadeOut(), fadeIn(), fadeToggle()和animate()等方法实现不同的动画效果，并且讲解了如何使用delay()和stop()来控制动画的延迟和停止。这些技巧对于增强网页交互性和用户体验至关重要。

一、jQuery动画

1、显示与隐藏

显示与隐藏

show() 方法显示隐藏的被选元素

        jquery对象.show(参数1，参数2)

hide() 方法隐藏被选元素

        jquery对象.hide(参数1，参数2)

toggle() 方法切换元素的可见状态
        jquery对象.toggle(参数1,参数2)
          参数1：可选持续时间数字 (单位默认毫秒)/字符串(normal 400 fast 200 slow 600)
参数2：可选回调函数动画执行完毕后调用的函数

$(".box h2").click(function () {
        var list = $(this).next(".list"); //当前点击的h2后的那一个ul
        list.toggle(200);
        list.show(5000, function () {
        $(this).hide(2000); //指向的是有动画的jquery对象
        });
        $(this).next(".list").hide(5000);
      });
    });

2、滑上和滑下

滑上/滑下

slideUp() 方法以滑动方式隐藏被选元素
        jquery对象.slideUp(参数1,参数2)

slideDown() 方法以滑动方式显示被选元素
        jquery对象.slideDown(参数1,参数2)

slideToggle()方法在被选元素上进行slideUp()和slideDown()之间的切换
       jquery对象.skideToggle(参数1,参数2)
参数1：可选持续时间数字 (单位默认毫秒)/字符串(normal 400 fast 200 slow 600)
参数2：可选回调函数动画执行完毕后调用的函数

 $(".nav li").bind({
            mouseenter: function () {
                $(this).addClass("on");
                $(this).children(".subnav").stop().slideDown();
            },
            mouseleave: function () {
                $(this).removeClass("on");
                $(this).children(".subnav").stop().slideUp();
            },
        });

3、淡入与淡出

淡入与淡出

fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见
        jquery对象.fadeIn(参数1,参数2)

fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏
        jquery对象.fadeOut(参数1,参数2)

fadeToggle()方法在fadeIn()和fadeOut()方法之间切换
       jquery对象.fadeToggle(参数1，参数2)

fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值
       jquery对象.fadeTo(参数1，参数3，参数2)
           参数3：不透明度淡入或淡出到某一不透明
参数1：可选持续时间数字(单位默认毫秒)/字符串(normal 400 fast 200 slow 600)
参数2：可选回调函数动画执行完毕后调用的函数

$(".cal").click(function () {
        $(".box,.mask").fadeIn();
    });
$(".mask span").click(function () {
        $(".box,.mask").fadeOut();
    });

4、自定义动画

自定义动画

animate() 方法执行 CSS 属性集的自定义动画
jquery对象.animate(参数1，参数2，参数3)
       参数1：对象 css属性
       参数2：持续时间
       参数3：回调函数

 $(".box")
    .animate({ left: "800px" }, 2000)
    .animate({ top: "400px" });

5、停止动画

停止动画

stop() 方法为被选元素停止当前正在运行的动画
        jquery对象.stop(参数1,参数2)
            参数1：可选是否停止被选元素的所有加入队列的动画，布尔值默认false
            参数2：可选规定是否立即完成当前的动画布尔值默认是false

 $(".nav li").bind({
            mouseenter: function () {
                $(this).addClass("on");
                $(this).children(".subnav").stop().slideDown();
            },
            mouseleave: function () {
                $(this).removeClass("on");
                $(this).children(".subnav").stop().slideUp();
            },
        });

6、延迟动画

延迟动画

delay() 方法对队列中的下一项的执行设置延迟
jquery对象.delay(延迟时间)

$(".cal").click(function () {
        $(".box,.mask").delay(400).fadeIn();
    });