jQuery学习笔记4 - jQuery动画

发表于   |   分类于   |     |   阅读次数

jQuery动画

显示和隐藏

在jQuery中，如果我们想要实现元素的显示和隐藏，可以使用2组方法：
（1）show()和hide()；
（2）toggle()；

show()和hide()

1
2
3
4
5
6
7
8
$().hide() //把所选元素的display属性设置为none。
$().show() //把所选元素的display属性还原为隐藏之前的显示状态（block、inline或者inline-block等）。

//带动画效果的显示和隐藏
$().hide(speed,callback)
$(),show(speed,callback)
// 参数speed为必选参数，表示动画执行的速度，单位是毫秒；
// 参数callback为可选参数（可以省略），表示动画执行完成之后的“回调函数”。

案例:
当点击“隐藏”按钮，使用hide()方法隐藏图片；当点击“显示”按钮，使用show()方法显示图片。这个例子非常简单。

1
2
3
4
5
6
7
8
$(function () {
            $("#btn_hide").click(function () {
                $("img").hide();
            });
            $("#btn_show").click(function () {
                $("img").show(500);
            });
        })

toggle()方法
在jQuery中，我们还可以使用toggle()方法来“切换”元素的“显示状态”。
如果元素是显示状态，则变成隐藏状态；如果元素是隐藏状态，则变成显示状态。

1
2
3
4
$().toggle()                     //简单的toggle()
$().toggle(speed , callback);    //动画的toggle()
//参数speed表示动画执行的速度，单位是毫秒；
//参数callback为可选参数（可以省略），表示动画执行完成之后的“回调函数”。

淡入和淡出

在jQuery中，如果我们想要实现元素的淡入淡出这种渐变效果，有3组方法：
（1）fadeIn()和fadeOut()；
（2）fadeToggle()；
（3）fadeTo()；

fadeIn()和fadeOut()
1
2
3
4
5
6
$().fadeIn(speed , callback)  //淡入效果
$().fadeOut(speed , callback) //淡出效果
/*
speed为可选参数，表示动画执行的速度，单位为毫秒，默认为200毫秒。如果speed参数省略，则采用默认速度。
callback为可选参数，表示动画执行完成之后的回调函数。
*/

fadeIn()/fadeOut()和show()/hide()区别

  1. show()和hide()，是通过改变height、width、opacity来实现动画的显示与隐藏；
  2. fadeIn()和fadeOut()，只通过opacity来实现动画的显示与隐藏；
  3. 它们在视觉上也有差别，例如hide()隐藏的效果是从下到上或从右下到左上慢慢折叠缩小，而fadeOut的淡出效果是整体淡化直至消失。
    不过这2组方法在动画显示与隐藏完成之后，都会设置display:none或者display:block。
fadeToggle()

使用fadeToggle()方法通过不透明度变化来切换匹配元素的“显示状态”。
也就是说，如果元素是显示状态，则变成隐藏状态；如果元素是隐藏状态，则变成显示状态。
fadeToggle()方法跟toggle()方法很相似，不过toggle()方法通过改变height、width、opacity来实现动画的显示与隐藏，而fadeToggle()只通过opacity来实现动画的显示与隐藏。

fadeTo()

在jQuery中，fadeIn()和fadeOut()这2种方法都是通过改变元素的透明度来实现淡入淡出的动画效果。其中在淡入效果中，透明度（opacity）从0.0变化到1.0；在淡出效果中，透明度（opacity）从1.0变化到0.0。
如果我们想要将元素透明度指定到某一个值，则可以使用fadeTo()方法。
$().fadeTo(speed , opacity , callback)

  • speed为可选参数，表示动画执行的速度，单位为毫秒，默认为500毫秒。如果speed参数省略，则采用默认速度。
  • opacity为必选参数，表示元素指定的透明度，取值范围为0.0~1.0。
  • callback为可选参数，表示动画执行完成之后的回调函数。

综合示例：demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(function () {
            $("#btn_hide").click(function () {
                $("#img1").hide(500);
            });
            $("#btn_show").click(function () {
                $("#img1").show(500);
            });
            $("#btn_out").click(function () {
                $("#img2").fadeOut();
            });
            $("#btn_in").click(function () {
                $("#img2").fadeIn();
            });
            $("#btn_toggle").click(function () {
                $("#img3").toggle(500);
            });
            $("#btn_fade").click(function () {
                $("#img4").fadeToggle();
            });
            $("#img5").hover(function(){
                $(this).fadeTo(200,0.8);
            },function(){
                $(this).fadeTo(200,1.0)
            })
        })

滑上和滑下

在jQuery中，如果我们想要实现元素的滑动效果，也有2组方法：
（1）slideUp()和slideDown()；
（2）slideToggle()；

slideUp()和slideDown()

slideDown()函数用于显示所有匹配的元素，并带有向下滑动的过渡动画效果。
向下滑动的动画效果，即元素可见区域的高度从0逐渐增大到其原有高度(向下逐渐展开)。
如果元素本身是可见的，则不对其作任何改变。如果元素是隐藏的，则使其可见。

与该函数相对的是slideUp()函数，用于隐藏所有匹配的元素，并带有向上滑动的过渡动画效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$().slideDown(speed , callback)
$().slideUp(speed , callback)
/*
speed为可选参数，表示动画执行的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度。
callback为可选参数，表示动画执行完成之后的回调函数。
对于滑动效果，一般情况下都是先“滑下”再“滑上”。
*/

//案例：
var flag = 0;
$(function () {
    $("h3").click(function () {
        if (flag == 0) {
            $("p").slideDown();
            flag = 1;
        }
        else{
            $("p").slideUp();
            flag = 0;
        }
    });
})

当使用slideDown()和slideUp()，我们需要用一个变量来判断当前元素的滑动状态，然后根据这个变量来决定是否执行slideDown()还是slideUp()方法。

slideToggle()

使用slideToggle()方法来切换元素的“滑动状态”。也就是说，如果元素是滑下状态，则变成滑上状态；如果元素是滑上状态，则变成滑下状态。

1
2
3
4
5
6
7
8
slideToggle(speed , callback)

//案例：
$(function () {
            $("h3").click(function () {
                $("p").slideToggle();
            });
        })

在实际开发中，对于滑动动画，slideToggle()方法相对slideUp()和slideDown()来得更加方便。

自定义动画

jQuery动画原理：
jQuery动画其实就是通过将元素的某一个属性从“一个属性值”在指定时间内平滑地过渡到“另外一个属性值”来实现动画效果。

简单动画

在jQuery中，对于自定义动画，我们可以使用animate()方法来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$().animate(params , speed , callback)
/*
- params，必选参数，表示“属性:值”列表，也就是元素在动画中变化的属性列表（具体形式，参考下面几个例子）；
params参数格式如下：
{"属性1":"属性值1","属性2":"属性值2",……, "属性n":"属性值n"}
- speed，可选参数，表示动画的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度；
- callback，可选参数，表示动画完成之后执行的函数（即回调函数）。
*/

//案例
$(function () {
            $("#lvye").click(function () {
                $(this).animate({ "width": "100px","height":"100px"}, 1000);
            })
        })

/*
jquery库源码本身有一个缺陷，就是在调用animate()方法的时候无法识别color、background-color和border-color这些颜色属性。因此需要引入一个jquery.color.js来修复这个bug。
*/
<script type="text/javascript" src="../js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.color.js"></script>
<script type="text/javascript">
    $(function () {
        $("#lvye").click(function () {
            $(this).animate({ "width": "100px", "height": "100px" ,"background-color":"red"}, 1000)
        })
    })
</script>

累积动画
1
2
3
4
5
6
7
8
$(function () {
            $("#btn-simple").click(function () {
                $("#simple").animate({ "width": "100px", "height": "100px" }, 1000);
            })
            $("#btn-sum").click(function () {
                $("#sum").animate({ "width": "+=100px", "height": "+=100px" }, 1000);
            })
        })

简单动画只是给定了元素属性的最终值，而累积动画是在元素属性的基础上的增加和减少。此外，如果我们多次点击“累加动画”按钮之后，会发现这个动画效果是不断累加的，

回调函数

如果想要在动画执行完成之后再实现某些操作，我们就需要用到了animate()方法中的回调函数。
回调函数说白了，就是在某个方法执行完成之后的“附加操作”。

1
2
3
4
5
6
7
8
$(function () {
            $("#lvye").click(function () {
                $(this).animate({ "width": "100px", "height": "100px" }, 1000, function () {
                    $(this).css("border", "5px solid red");
                });
            })
        })
//使用了回调函数，我们就实现了预期的效果：动画“执行完成之后”再调用CSS()方法来添加一个边框。

动画执行情况/处理

animate在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate的提供第二种设置语法，传递一个对象参数，可以拿到动画执行状态一些通知
.animate( properties, options )

options参数

  • duration - 设置动画执行的时间
  • easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
  • step：规定每个动画的每一步完成之后要执行的函数
  • progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
  • complete：动画完成回调

其中最关键的一点就是：
如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次.
列出常用的方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

案例：http://sandbox.runjs.cn/show/athnfz7g
更多参考：http://api.jquery.com/animate/

队列动画

在jQuery中，队列动画指的是在元素中按照一定的顺序执行多个动画效果，即有多个animate()方法在元素中执行，然后根据这些animate()方法执行的先后顺序，形成了动画队列，然后按照这个动画队列的顺序来进行显示。
队列动画包括之前我们所学到的4种动画形式：（1）显示和隐藏；（2）淡入和淡出；（3）滑上和滑下；（4）自定义动画。

1
2
3
4
5
6
7
8
$().animate().animate()…….animate();

//案例：
$(function () {
            $("#lvye").click(function () {
                $(this).animate({"width":"100px"},1000).animate({"height":"100px"},1000);
            })
        })

动画停止stop()

在jQuery中，很多时候我们需要停止当前元素上正在执行的动画效果，可以使用stop()方法来实现。
$().stop(clearQueue,gotoEnd)
说明

  1. 参数clearQueue和参数gotoEnd都是可选参数，取值都为布尔值。两个参数默认值都为false。
  2. 参数clearQueue表示是否要清空“未执行”的“动画队列”。清空的是整个“动画队列”，而不仅仅是某一个动画。
  3. 参数gotoEnd，表示是否直接将正在执行的动画跳转到末状态。
  4. 默认情况下，没有参数值的stop()方法只会停止“当前正在执行”的动画。如果你使用animate()方法为当前元素设置了A、B、C这3个动画。如果当前正在执行的动画是A，则只会停止动画A的执行，不会阻止B和C的执行。如果我们想停止所有的动画，可以使用设置参数clearQueue为true来实现。
  5. stop()方法在实际开发中唯一的用途：停止当前动画，防止动画累积的bug。
    jQuery stop()方法
参数取值 说明
stop() 等价于stop(false,false)，仅仅停止“当前执行”这段动画，后面的动画还可以继续执行
stop(true) 等价于stop(true,false)，停止所有动画，包括当前执行的动画
stop(true,true) 当前动画跳到末状态，并停止所有动画
stop(false,true) 当前动画跳到末状态，接着执行下面的动画

案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function () {
    $("#lvye").hover(function () {
        $(this).animate({ "width": "100px", "height": "100px" }, 500);
    }, function () {
        $(this).animate({ "width": "50px", "height": "50px" }, 500);//移出时返回原状态
    })
})
/*
上述代码会产生Bug:animation动画不断地执行！
其实这个bug是由于动画累积导致的，如果一个动画没有执行完，它就会被添加到“动画队列”中去。在这个例子中，每一次移入或者移出，都会添加新一个动画到“动画队列”中，然后没有执行完的动画会继续执行，直到所有动画执行完毕。
此时要解决这个bug的话，我们只需要在移入动画或者移出动画执行之前加入stop()方法，就能解决这个问题。stop()方法会结束当前正在执行的动画，并立即执行队列中下一个动画。修改后的jQuery代码如下：
*/
$(function () {
    $("#lvye").hover(function () {
        $(this).stop().animate({ "width": "100px", "height": "100px" }, 500);
    }, function () {
        $(this).stop().animate({ "width": "50px", "height": "50px" }, 500);//移出时返回原状态
    })
})

动画延迟delay()

在jQuery中，如果我们想要对动画进行延迟操作，可以用delay()方法来实现。
$().delay(speed)
案例：

1
2
3
4
5
6
$(function () {
            $("#lvye").click(function () {
                $(this).animate({ "width": "200px" }, 1000).delay(1000).animate({ "height": "200px" }, 1000);
            });
        })
//这里使用2个animate()方法定义了一个队列动画，这个队列动画共有2段动画。然后在第1段动画之后使用了delay()方法来延迟2秒（2000毫秒），然后再执行第2段动画。

动画立即完成finish()

finish()函数用于立即完成队列中的所有动画。
finish()会停止当前正在运行的动画，删除所有队列中的动画，并完成匹配元素的所有动画。

1
$().finish(queueName) //queueName:可选/String类型,指定的队列名称，默认为"fx"，表示jQuery标准的效果队列

深入了解jQuery动画

所有jQuery动画效果，从本质上来说，都是通过改变元素的CSS属性来实现的，也就是说：jQuery动画就是通过将元素的属性从“一个属性值”在一定时间内平滑地过渡到“另一个属性值”，从而实现动画效果。

在jQuery中，对于“显示和隐藏、淡入和淡出、滑上和滑下”这3种动画，实现的原理如下：
（1）显示和隐藏：通过改变width、height、opacity、display来实现动画的显示和隐藏；
（2）淡入和淡出：通过改变opacity、display来实现动画的淡入和淡出；
（3）滑上和滑下：通过改变height、display来实现动画的滑上和滑下；
案例：

1
2
3
4
5
6
7
8
9
//以下代码，每一组中的2句代码都是等价的。
$().hide(500);
$().animate({"width":"0","height":"0","opacity":"0.0","display":"none"},500);

$().fadeOut(500);
$().animate({"opacity":"0.0","display":"none"},500);

$().slideUp(500);
$().animate({"height":"0,""opacity":"0.0","display":"none"},500);

判断动画状态is()

在jQuery中我们还可以使用is()方法来判断所选元素是否正处于动画状态，如果元素不处于动画状态，则添加新的动画；如果元素处于动画状态，则不添加新的动画。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if(!$().is(":animated"))
{
    //如果当前没有进行动画，则添加新动画
}

//案例
$(function () {
            $("#wrapper").hover(function () {
                if(!$(" #content", this).is(":animated"))
                {
                    $(" #content", this).animate({ "bottom": "0px" }, 200);
                }
            }, function () {
                if(!$(" #content", this).is(":animated"))
                {
                    $(" #content", this).animate({ "bottom": "-28px" }, 200);
                }
            })
        })

坚持原创技术分享，您的支持将鼓励我继续创作！