5 jQuery 动画

本文主要是介绍5 jQuery 动画，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

jQuery 中的任何动画效果，都可以指定三种速度参数，slow、 normal、 fast，对应的时间⻓长度分别是 0.6 秒，0.4 秒和 0.2 秒，也可以传⼊入参数，传⼊入数字作为参数不不需要加引号，使⽤用关键字需要加引号。

动画队列列
当⼀一个 animate() ⽅方法中应⽤用多个属性时，动画是同时发⽣生的。 当以链式⽅方法调⽤用时，动画是按顺序发⽣生（除⾮非 queue 选项为 false ）。 默认情况下，动画都是同时发⽣生的。 当以回调的形式应⽤用动画⽅方式时，按照回调顺序发⽣生。

停⽌动画

stop([clearQueue,gotoEnd])

clearQueue 是否要清空未执⾏行行的动画队列列 gotoEnd 是否直接跳转到末状态

判断元素是否处于动画状态
要始终避免动画累计⽽而导致的动画与⽤用户⾏行行为不不一样的情况。 当用户快速在某个元素上执行行 animate() 时，就会出现动画累加。解决方法是判断元素是否处于动画状态，如果用户不不处于动画状态，才为元素添加新的动画，否则不不添加。

延迟动画
在动画执⾏行行的过程中，如果想对动画进⾏行行延迟操作，那么
可以使⽤用 delay() 方法。

<button id="btn">隐藏</button>
<div class="box" style="width: 200px;height: 200px;background: red"></div>
<script>
    $(function () {
        $('#btn').click(function () {
            //hide() 中可以传入'slow'，'normal'，'fast'
            $('.box').stop().hide(1000); //隐藏
            //fadeOut() 淡出
            $('.box').fadeOut(1000);
            //fadeIn() 淡入
            $('.box').fadeIn(1000);
            //slideUp() 上拉
            $('.box').slideUp(1000);
            //slideDown 下拉
            $('.box').slideDown(1000);
            //fadeTo() 透明度
            // fadeTo(毫秒,透明度,函数)
            $('.box').fadeTo(400,0.3);

            //合成事件
            //toggle() 仅仅是显示和隐藏使用toggle
            $('.box').toggle(400);

            //fadeToggle() 淡入淡出效果
            $('.box').fadeToggle(400);

            //slideToggle() 上拉下拉效果
            $('.box').slideToggle(400);

            //自定义动画 
            //animate('对象'，'时间'，'函数')
            $('.box').animate({
                width:300,
                height:300,
                //颜色 需要jQuery的颜色插件配合，百度搜索jQuery-color 在引入到script
                //background:'green',
                'font-size':40
            },1000,function () {
                width:200,
                height:200,
                'font-size':30
            },1000,function(){
                $('.box').trigger('click'); //重复执行自定义动画效果
            })
        })
    })
</script>

hide & show

<div class="box" style="width: 200px;height: 200px;background: red"></div>
<script>
    $(function () {
        $('.box').mouseenter(function () {
            $(this).stop().hide(500); //隐藏  hide 可添加回调函数
        })
        $('.box').mouseleave(function () {
            $(this).stop().show(500); //显示 show 可添加回调函数
        })
</script>

这篇关于5 jQuery 动画的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！