常用动画效果

动画效果也是jQuery库吸引人的地方，通过jQuery的动画方法，能轻松地为网页添加非常精彩的视觉效果，给用户一种全新的体验。下面，简单介绍几种常用的动画方法。

show()和hide()

show()方法和hide()方法是jQuery中最基本的动画方法，在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”，当元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态。而toggle()则是实现切换元素可见状态，如果元素可见，切换为隐藏的，如果元素是隐藏的，则切换为可见的。这三个方法的用途不同，但是用法参数完全相同。

不带参数时，表示直接切换，没有动画效果；
可以带一个表示速度的参数：slow(600)、fast(200)、normal(400)、1000等；
可以带一个表示速度变化的参数：linear（匀速）、swing（变速）；
在可以带一个回调函数。

<style type="text/css">
        div {width:200px; height:100px; background-color:pink}
 </style>

 <div>today is sunning</div>
 <input type="button" value="显示" onclick="f1()" />
 <input type="button" value="隐藏" onclick="f2()" />
 <input type="button" value="开关效果" onclick="f3()" />
 <input type="button" value="速度开关效果" onclick="f4()" />

<script type="text/javascript">
function f1(){
    $("div").show("slow");
}

function f2(){
   $('div').hide(2000,'swing');// 变速运动
}

function f3(){
    $("div").toggle();
}

function f4(){
    $("div").toggle(3000,function(){
        alert('哈哈哈，我消失了，你能看到我么？');
    });
}
</script>

此时，f1能够用缓慢的动画让隐藏的元素显示出来，历时600毫秒，f2能够用缓慢的动画让显示的元素隐藏起来，历时2000毫秒，并且是匀速运动的，f3能够快速的实现元素的开关效果，但是没有动画，f4能够用缓慢的动画实现开关效果，历时3000毫秒，并且在每次动画结束时执行回调函数。

slideUp()和slideDown()

slideDown()能够调整元素的高度，使匹配的元素以滑动的方式显示出来，slideUp()则是调整元素高度，使匹配的元素以滑动的方式隐藏起来，而slideToggle()则是开关式控制元素隐藏或显示。虽然作用效果和上面的显示隐藏不一样，但是接收参数方式和使用方法却是一样的。

style type="text/css">

　　div {width:200px; height:100px; background-color:pink}

</style>

<div>today is sunning</div>

　　function f1(){

　　　　$("div").slideDown('normal');

　　}

　　function f2(){

　　　　$('div').slideUp(1000,function(){

　　　　　　alert('动画完成');

　　　　})

　　}

　　function f3(){

　　　　$("div").slideToggle();

　　}

</script>

fadeIn()和fadeOut()

fadeIn()和fadeOut()方法通过调整元素的不透明来实现匹配元素的淡入和淡出效果,并能在动画完成后可选地触发一个回调函数，在此过程中，元素的高度和宽度不会发生变化。而fadeToggle()则是开关式的控制元素的淡入淡出。这些方法的接收参数方式和使用方法同上面的显示隐藏方法一样。

　　div {width:200px; height:100px; background-color:pink}

</style>

<div>today is sunning</div>

　　function f1(){

　　　　$("div").fadeIn(5000);

　　}

　　function f2(){

　　　　$('div').fadeOut(1000,function(){

　　　　　　alert('我消失了');

　　　　});

　　}

　　function f3(){

　　　　$("div").fadeToggle(1000);

　　}

</script>

fadeTo()

该方法能把所匹配的元素的不透明度以渐进的方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数，该方法接收三个参数：

表示速度的字符串或表示动画时长的毫秒数值
需要调整到的目标透明度值（0到1之间的数字）
动画完成时执行的函数（可选）

　　div {width:200px; height:100px; background-color:pink}

</style>

<div>today is sunning</div>

　　function f1(){

　　　　$("div").fadeTo(1000,0.34,function(){

　　　　　　alert("还能看见我吗")

　　　　});

　　}

　　function f2(){

　　　　$('div').fadeTo("slow",0.66);

　　}

</script>

posted on 2018-08-12 14:15 紅葉阅读(752) 评论(0) 编辑收藏举报