jQuery入门笔记之(四)动画效果

转载自个人博客

jQuery自带动画效果

一. 显示、隐藏

jQuery中.show()为显示方法,.hide()为隐藏方法。
在无参数的时候,只是硬性的显示内容和隐藏内容。就不用代码来演示了,.hide()方法其实就是把对象的css设为display:none;而.show()方法会保留原来的display值,并进行设置。但是在一些场景中会有所改变,在后面进行说明)。
这两个方法都可以带参数。

先来说明第一个参数:

  1. 第一种用法是传入数字,为毫秒数,表示动画过渡效果的时间。里面同时富含了匀速变大变小,以及透明度变换。

<button class="show">显示</button>
<button class="hide">隐藏</button>
    <div id="box">块</div>
<script>
    $(".show").click(function() {
        $("#box").show(1000);//显示用了一秒
    });//可以看到很明显的动画过渡效果。
    $(".hide").click(function() {
        $("#box").hide(1000);
    });
</script>
  1. 第二种用法是传入一个字符串。”slow”、”normal”和”fast”,分别对应600毫秒、400毫秒和200毫秒。在传入空字符串或其他字符串参数时,默认为400毫秒。

  2. 传入一个对象,后面的参数就不能填了,都在对象中。这个比较强大,整合了show()方法的多种参数实现效果外,还有一些其他的方法,比如可以动画执行中的状态,来执行函数。比较复杂,而且日常使用的话,现在这个就已经够了,在这里并不做讲述,有兴趣的可以自己参考手册。

特别注意:在传入了速度之后,内联元素inline,隐藏显示过后会变成内联块,inline-block。假设你给一个内联元素的css中设置了宽高,本来不生效,但是在执行隐藏显示后宽高生效

第二个参数:为可选参数,easing运动方式,这个参数,大部分参数值需要通过插件来使用,以后再来讲解。自带的参数有两个:”swing”(缓动)、”linear”(匀速),不填时,默认为”swing”。(注意这里传入一个错误参数,会报错)

第三个参数:可选,回调函数,第一个动画执行完毕后执行,实现链式动画。

<button class="show">显示</button>
<button class="hide">隐藏</button>
<div class="test">一</div><div class="test">二</div><div class="test">三</div><div class="test">四</div>
<script>
    $('.show').click(function () {//链式动画,递归自调用
     $('.test').first().show('fast', function testShow() {
         $(this).next(".test").show('fast', testShow);
       });//注意next中的限制条件,不然会干扰其他的元素,执行该函数。
    });
    $('.hide').click(function () {
     $('.test').last().hide('fast', function() {
         $(this).prev(".test").hide('fast', arguments.callee);
       });//这里只是展现有arguments.callee这种方式,并不推荐使用,建议使用函数递归自调用
    });
</script>

我们在使用.show().hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判
断。而 jQuery 提供给我们一个类似功能的独立方法:.toggle()。使用方法一样。

$(".toggle").click(function(){
    $("div").toggle("fast");
});

二. 滑动、卷动

jQuery 提供了一组改变元素高度的方法:.slideUp().slideDown().slideToggle()。顾名思义,向上收缩(卷动)和向下展开(滑动)。

$('.toggle').click(function () {
    $('div').slideToggle();
});

注意:滑动、卷动效果和显示、隐藏效果一样,具有相同的参数。不展开讲

三. 淡入、淡出

jQuery 提供了一组专门用于透明度变化的方法:.fadeIn().fadeOut(),分别表示淡入、
淡出,当然还有一个自动切换的方法:.fadeToggle()

但是上面三个透明度方法只能是从 0 到 100,或者从 100 到 0,如果我们想设置指定值就没
有办法了。而 jQuery 为了解决这个问题提供了.fadeTo()方法,使透明度到达指定值:

$(".toggle").click(function() {
    $("#box").fadeToggle('slow');
});
$(".to").click(function() {
    $("#box").fadeTo('slow', 0.3);//表示30,jQuery中使用的是百分比的形式来设置
});

注意:最先点击to透明度变成0.3,再点击toggle,第一次点击隐藏,第二次点击显示透明度为0.3!(回到原有设置)

淡入、淡出和上面的显示、隐藏效果一样,具有相同参数

自定义动画

jQuery提供了上面几种简单常用的固定动画方面我们使用。但有些时候,这些简单动画无法满足我们更加复杂的需求。这个时候,jQuery 提供了一个.animate()方法来创建我们的自定义动画,满足更多复杂多变的要求。
强烈建议先看我的《JavaScript完美运动框架的进阶之旅》,使用JS基本实现了自定义动画,只不过jQuery的更加全面完善,当然也更加复杂。

必传参数只有一个,对象,实现动画:

$("button").click(function() {
    $("#box").animate({
        width: "200px",
        height: "500px"});
});

这段代码已经实现了多重动画同步运动的效果,使用键值对的方式,来表明运动动画终点的位置。在实现上下左右移动时,需要结合CSS,把物体属性设置绝对定位!

第二个参数,可选,使用字符串时如同上面一样的3个值表示不同的时间(默认400ms),数字类型时,使用毫秒方式。直接跟在第一个参数之后就好
第三个参数,可选,也和上面一样,easing运动方式,自带的参数有两个:”swing”(缓动)、”linear”(匀速),不填时,默认为”swing”。(注意这里传入一个错误参数,会报错)
第四个参数,可选,回调函数,在动画执行完毕后执行,可实现链式动画。

下面进行一些特殊的说明:

自定义动画中,每次开始运动都必须是初始位置或初始状态,而有时我们想通过当前位置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。

$("button").click(function() {
    $("#box").animate({//必须先设置CSS的绝对定位。
        left:"+=100px"
    });
});

主要是说一下自定义动画中的链式动画,有两种形式:

  1. 在回调函数中再执行一个动画,这个没什么好说的。

  2. 通过连缀或顺序来实现链式动画。

通过依次顺序实现链式动画

$('button').click(function () {
    $('#box').animate({'left' : '100px'});
    $('#box').animate({'top' : '100px'});
    $('#box').animate({'width' : '300px'});
});

注意:如果不是同一个元素,就会实现同步动画

通过连缀实现链式动画

$('button').click(function () {
    $('#box').animate({'left' : '100px'})
    .animate({'top' : '100px'})
    .animate({'width' : '300px'});
});

链式动画进阶

之前我们已经可以实现链式动画了,如果是同一个元素,可以依次顺序或连缀调用。如果是不同元素,可以使用回调函数。但有时链式动画太多,回调函数的可读性大大降低。为此,jQuery 提供了一组专门用于链式动画的方法。

$('#box').slideUp('slow').slideDown('slow').css('background', 'orange');这段代码中,css方法会在一开始就执行。因为动画方法可以用连缀来实现依次排列,但是css方法不是,会在一开始传入队列之前。如何解决呢?回调函数当然可以实现。

$('button').click(function () {
    $('#box').slideUp('slow').slideDown('slow',function (){
        $(this).css('background', 'orange');
    });
});

这当然没问题,但是那并不是我们应该做的,因为这样可读性太差了,链式动画一多呢?原本的动画都不清晰了吧?jQuery为我们实现了一个类似回调函数的方法:.queue()。jQuery 的.queue()的回调函数可以传递一个参数,这个参数是 next 函数,在结尾处调用这个 next()方法即可再连缀执行列队动画。(不这样使用的话,后续动画效果无法实现)

$('button').click(function () {//在同一个元素直接这样写就可以了。
    $('#box').slideUp('slow')
                .slideDown('slow')
                .queue(function (next) {
                    $(this).css('background', 'orange');
                    //next();//animate的动画效果不会生效,因为把next()注释掉了。
                })
                .animate({//记得设置绝对定位
                    height: "200px",
                    left: "100px"
                });
});

.queue()方法还有一个功能,就是可以得到当前链式动画剩余的长度(包括当前的动画)。fx 是默认链条的参数。

//把上面的代码的第一个动画改装成如下模样时,会弹出4。
$('#box').slideUp('slow',function  (){
    alert($(this).queue('fx').length);
})

jQuery 还提供了一个清理链式动画的功能方法:.clearQueue()。把它放入一个链式的回调函数或.queue()方法里,就可以把剩下未执行的链条给截断。

//清理后续链式调用
$('#box').slideDown('slow', function () {$(this).clearQueue()});

动画相关方法与全局属性

停止动画
有很多时候,我们需要停止正在运行中的动画,jQuery中为此提供了一个.stop()方法。
它有三个可选参数

  1. queue 类型: String 停止链式动画的名称。(比较少用到,若存在,后两个参数都是指向该链式动画)

  2. clearQueue类型: Boolean一个布尔值,指示是否取消后续的链式动画。默认 false.

  3. jumpToEnd 类型: Boolean一个布尔值指示是否当前动画立即完成。默认false.

说明:

  1. 在无参数,且为链式动画时,调用.stop()方法,只是立即停止当前正在进行的动画,后续动画继续执行。

  2. 传入一个true时,立即停止动画,并且清空后续所有动画。

  3. 传入2个true时,立即停止,并且跳转到当前动画的结束位置,后续动画也不再执行。

代码如下:有兴趣的自行测试

<button class="start">动画</button>
<button class="stop">停止</button>
<div style="position: absolute;height: 50px;width: 50px;background-color: #0B71E6;top:30px">12</div>
<script type="text/javascript">
    $('.start').click(function () {
        $('div').animate({'left' : '300px'}, 1000)
                 .animate({'top' : '300px'}, 1000)
                 .animate({ 'width' : '300px'}, 1000)
                 .animate({'height' : '300px'}, 1000);
    });
    $(".stop").click(function() {
        $("div").stop(true,true);
    });
</script>

延迟动画
有时在执行动画或链式动画时,需要在运动之前有延迟执行,jQuery 为此提供了.delay()方法。参数为延迟时间,单位为毫秒数。这个方法可以在动画之前设置延迟,也可 、以在列队动画中间加上。直接在上面代码任意地方加都可以,比较简单,自行测试吧。

获取正在进行的动画
在选择器的那篇文章中中,我们提到过一个过滤器:animated,这个过滤器可以判断出当前运动的动画是哪个元素。通过这个特点,我们可以避免由于用户快速在某个元素执行动画时,由于动画积累而导致的动画和用户的行为不一致。

对上面代码进行一些改造,将原div进行复制,添加到其后,给原div添加一个id并且在动画效果中改为该元素运动

$('.stop').click(function(){
    $('div:animated').stop().css('background', 'red');
        //可以看到只有运动的div背景变色,而未移动的div不改变背景色。
});

动画全局属性
jQuery 提供了两种全局设置的属性,分别为:$.fx.interval,设置每秒运行的帧数;$.fx.off,关闭页面上所有的动画。

$.fx.interval 属性可以调整动画每秒的运行帧数,默认为 13 毫秒。数字越小越流畅,但可能影响浏览器性能。
设置运行帧数为 1000 毫秒:$.fx.interval = 1000;

设置动画为关闭 true:$.fx.off = true;默认为false

    原文作者:三省吾身丶丶
    原文地址: https://segmentfault.com/a/1190000004260530
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞