jQuery学习小结2——动画

落日映苍穹つ 2021-12-22 09:03 192阅读 0赞

**一、基础动画**

<table style="color:#000000;"> 
 <tbody> 
 <tr> 
 <td> 方法名 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td>show([speed,[easing],[fn]]) hide([speed,[easing],[fn]])</td> 
 <td> 
 <ul> 
 <li>speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(分别对应600 毫秒、400 毫秒和200 毫秒)</li> 
 <li>easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"</li> 
 <li>fn:在动画完成时执行的函数，每个元素执行一次</li> 
 </ul></td> 
 </tr> 
 <tr> 
 <td>toggle([speed],[easing],[fn])</td> 
 <td> 用来替代hide()方法和show()方法，响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 </td> 
 </tr> 
 <tr> 
 <td> slideUp([speed],[easing],[fn]) slideDown([speed],[easing],[fn]) </td> 
 <td> 这个动画效果只调整元素的高度，其他参数同show </td> 
 </tr> 
 <tr> 
 <td> slideToggle() </td> 
 <td> 用来代替slideUp()和slideDown()方法，所以只能改变高度 </td> 
 </tr> 
 <tr> 
 <td> fadeIn([speed],[easing],[fn]) fadeOut([speed],[easing],[fn]) fadeToggle([speed,[easing],[fn]]) </td> 
 <td> 
 <ul> 
 <li>这个动画只调整元素的不透明度，其他参数同show</li> 
 <li>三个透明度方法只能是从0 到100，或者从100 到0</li> 
 </ul></td> 
 </tr> 
 <tr> 
 <td> fadeTo([[speed],opacity,[easing],[fn]]) </td> 
 <td> 
 <ul> 
 <li>只改变不透明度</li> 
 <li>opacity:一个0至1之间表示透明度的数字。</li> 
 </ul></td> 
 </tr> 
 </tbody> 
</table>

**1、显示、隐藏**

.hide()方法其实就是在行内设置CSS 代码：display:none; 而.show()方法要根据原来元素是区块还是内联来决定，如果是区块，则设置CSS 代码：display:block; 如果是内联，则设置CSS 代码：display:inline;

$('.show').click(function () {
        $('#box').show('slow', function () {
            alert('动画持续完毕后，执行我！');
        });
    });
    //列队动画，使用函数名调用自身
    $('.show').click(function () {
        $('div').first().show('fast', function showSpan() {
            $(this).next().show('fast', showSpan);
        });
    });
    //列队动画，使用arguments.callee 匿名函数自调用
    $('.hide').click(function () {
        $('div').last().hide('fast', function() {
            $(this).prev().hide('fast', arguments.callee);
        });
    });

**1.2 滑动、卷动**

滑动、卷动效果和显示、隐藏效果一样，具有相同的参数。

**1.3 淡入、淡出**

*  淡入、淡出效果和显示、隐藏效果一样，具有相同的参数
 *  对于.fadeTo()方法，如果本身透明度大于指定值，会淡出，否则相反

$('.toggle').click(function () {
        $('#box').fadeTo('slow', 0.33); //0.33 表示值为33
    });

**二、自定义动画**

animate(params,\[speed\],\[easing\],\[fn\])

*  **params**:一组包含作为动画属性和终值的样式属性和及其值的集合
 *  **speed**:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
 *  **easing**:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
 *  **fn**:在动画完成时执行的函数，每个元素执行一次。

**2.1 操作多个属性——params**

$("button").click(function(){
      $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
      });
    });

*  默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
 *  *色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，需要从 jQuery.com 下载 Color Animations 插件*

**2.2 使用相对值——在值的前面加上 += 或 -=**

$("button").click(function(){
      $("div").animate({
        left:'250px',
        height:'+=150px',
        width:'+=150px'
      });
    });

自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位置或状态下再进行动画，这个时候就可以使用相对值

**2.3 使用预定义的值——"show"、"hide" 或 "toggle"**

$("button").click(function(){
      $("div").animate({
        height:'toggle'
      });
    });

**2.4 使用队列功能**

自定义实现列队动画的方式，有两种：

*  在回调函数中再执行一个动画——同一个元素，或不同元素
 *  通过连缀或顺序来实现列队动画——同一个元素

//1. 通过依次顺序实现列队动画 —— 注意：如果不是同一个元素，就会实现同步动画
    $('.animate').click(function () {
    　　$('#box').animate({'left' : '100px'});
    　　$('#box').animate({'top' : '100px'});
    　　$('#box').animate({'width' : '300px'});
    });
    //2. 通过连缀实现列队动画
    $('.animate').click(function () {
    　　$('#box').animate({
    　　　　'left' : '100px'
    　　}).animate({
    　　　　'top' : '100px'
    　　}).animate({
    　　　　'width' : '300px'
    　　});
    });
    //3. 通过回调函数实现列队动画
    $('.animate').click(function () {
    　　$('#box').animate({
    　　　　'left' : '100px'
    　　}, function () {
    　　　　$('#box').animate({
    　　　　　　'top' : '100px'
    　　　　}, function () {
    　　　　　　　　$('#box').animate({
    　　　　　　　　　　'width' : '300px'
    　　　　　　　　});
    　　　　});
    　　});
    });

**2.4 其他函数**

① stop(\[queue\],\[clearQueue\],\[jumpToEnd\])

*  **queue**:用来停止动画的队列名称
 *  **clearQueue**:如果设置成true，则清空队列。可以立即结束动画
 *  **jumpToEnd**:如果设置成true，则完成队列。可以立即完成动画

$(document).ready(function(){
 $("#start").click(function(){
 $("div").animate({left:'100px'},5000);
 $("div").animate({fontSize:'3em'},5000);
 }); 
 $("#stop").click(function(){
 $("div").stop(); //按钮会停止当前活动的动画，但允许已排队的动画向前执行
 });
 $("#stop2").click(function(){
 $("div").stop(true); //按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止
 });
 $("#stop3").click(function(){
 $("div").stop(true,true); //会立即完成当前活动的动画，然后停下来
 }); 
 });
 
 <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

② delay(duration,*\[queueName\]*)

$('#foo').slideUp(300).delay(800).fadeIn(400);

③ queue(element,\[queueName\],callback()) —— 显示或操作在匹配元素上执行的函数队列

*  **element**:检查附加列队的DOM元素
 *  **queueName**:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
 *  **callback()**:要添加进队列的函数

④ dequeue(\[queueName\])——从队列最前端移除一个队列函数，并执行他，队列名，默认为fx

⑤ clearQueue(*\[queueName\]*)——清空对象上尚未执行的所有队列，队列名，默认为fx

如果不带参数，则默认清空的是动画队列。这跟stop(true)类似，但stop()只能清空动画队列，而这个可以清空所有通过 .queue() 创建的队列

//使用.queue()方法模拟动画方法跟随动画方法之后
    $('#box').slideUp('slow').slideDown('slow').queue(function () {
        $(this).css('background', 'orange');
    });
    //如果函数执行后要继续队列，则执行next()或jQuery(this).dequeue();
    $('#box').slideUp('slow').slideDown('slow').queue(function (next) {
        $(this).css('background', 'orange');
        next();
    }).hide('slow');
    $('#box').slideUp('slow').slideDown('slow').queue(function () {
        $(this).css('background', 'orange');
        $(this).dequeue();   //next 函数是jQuery1.4 版本以后才出现的，而之前我们普遍使用的是.dequeue()方法
    }).hide('slow');
    //使用顺序调用的列队，逐个执行，非常清晰
    $('#box').slideUp('slow');
    $('#box').slideDown('slow');
    $('#box').queue(function () {
        $(this).css('background', 'orange');
        $(this).dequeue();
    })
    $('#box').hide('slow');

**三、和动画相关的过滤器和方法**

**3.1 :animated**

这个过滤器可以判断出当前运动的动画是哪个元素。通过这个特点，我们可以避免由于用户快速在某个元素执行动画时，由于动画积累而导致的动画和用户的行为不一致。

//递归执行自我，无线循环播放
    $('#box').slideToggle('slow', function () {
        $(this).slideToggle('slow', arguments.callee);
    });
    //停止正在运动的动画，并且设置红色背景
    $('.button').click(function(){
        $('div:animated').stop().css('background', 'red');   
    });

**3.2 判断元素是否在动画状态的方法**

$(element).is(“:animated”);

**四、动画全局属性**

*  $.fx.interval，设置每秒运行的帧数，默认为13 毫秒。数字越小越流畅，但可能影响浏览器性能
 *  $.fx.off，关闭页面上所有的动画

转载于:https://www.cnblogs.com/JoannaQ/p/3665238.html