jquery动画效果学习笔记8种效果

jQuery 2018-12-31

1、元素的显示和隐藏

display:none; 隐藏
display:block; 显示

简单显示和隐藏方法

a) show() 显示
b) hide() 隐藏
c) toggle() 开关，显示则隐藏，隐藏则显示

rush:js;">

duck and dog

3、淡入淡出效果

让元素通过一定透明度变化，达到显示和隐藏的效果

fadeIn(speed,[callback])
fadeOut(speed,[callback])
fadetoggle(speed,[callback])开关效果
fadeto(speed,opacity,[callback]) 把div设置一定透明度（0-1）0.3就是30%透明度

<div class="jb51code">
<pre class="brush:js;">
<script type="text/javascript">
function f1(){
//隐藏
$("div").fadeOut(4000);
}
function f2(){
//显示
$("div").fadeIn(4000);
$("#two").fadeto(2000,0.3);
}

function f3(){
$("div").fadetoggle(2000);
}

duck and dog

5、累加累减动画

如果动画一次设定left：500,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的，只需要将left:”500px”改成left:”+=500px”或者left:”-=500px”即可。

rush:js;"> (function(){ $("#panel").click(function(){ $(this).animate({left: "+=500px"},3000); }) })

6、多重动画

1、同时执行多个动画上面的例子只控制了left属性的变化，这回我们在控制left属性的时候同时控制元素高度变为200px

rush:js;"> $(function(){ $("#panel").click(function(){ $(this).animate({left: "500px",height:"200px"},3000); }) })

2、顺序执行动画

上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度，那很简单，只需要把上面的animate()方法拆开写成两个即可

rush:js;"> $(function(){ $("#panel").click(function(){ $(this).animate({left: "500px"},3000) .animate({height:"200px"},1000); }) })

3、综合动画

接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度，并将它的不透明度从50%切换到100%。然后再让它从上向下移动，同时它的宽度变大，当完成这些效果后让它以淡出的方式隐藏掉。

rush:js;"> $(function(){ $("#panel").css("opacity",0.5);//设置不透明度 $("#panel").click(function(){ $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) .animate({top:"200px",width:"200px"},3000) .fadeOut(1000); }) })

7、动画回调函数

在上例中，如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了

rush:js;"> $(function(){ $("#panel").css("opacity",3000,function(){$(this).css("border","5px solid blue")});

})
})

这样就把css方法加入到动画队列中了。

8、停止动画和判断是否处于动画状态

1、停止元素的动画

stop([clearQueue][,gotoEnd]) 两个都是可选参数，都是boolean类型参数说明：

clearQueue：代表是否清空未执行完的动画队列 gotoEnd ：代表是否将正在执行的动画跳到末状态通过一个综合的示例就可以弄明白stop()方法的这两个参数了：

<div class="jb51code">
<pre class="brush:xhtml;">
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }

panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}

.head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}

2、判断元素是否处于动画状态

当使用animate()方法的时候，要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时，就会出现动画累积。

解决办法是判断元素是否正在处于动画状态，当不处于动画状态的时候，才为元素添加新的动画。用法：

rush:js;"> if(!$(element).is(":animated")){ //添加新的动画 }

通过本文对8种jquery动画效果的详细剖析，玩转jquery动画效果，希望大家喜欢这篇针对jquery动画效果进行全面介绍的文章。

jquery动画 jquery动画效果 jquery动画效果插件 jquery动画特效 jquery淡入淡出效果 jquery滑动效果