Jquery中的动画

Jquery中的任何动画效果都可以指定三种速度参数，即”slow“”normal“”fast“时间长度分别为0.6s 0.4s 0.2s 的那个是用速度关键字是需要加上引号。

4.2.1show（）方法和hide（）方法

在文档里面，为一个元素调用hide（）方法，可以将该元素的display样式改为“none”

在Jquery中做动画要求在标准的模式下，否则可能会引起动画抖动，标准模式下即要求文件头部包括

DTD定义

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2show（）方法和hide（）方法让元素动起来

show（6000）//让动画在6000ms内显示完全

4.2.2 fadeIn() 淡入方法和 fadeOut（）淡出方法

只改变元素的不透明度。

fadeOut（）方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（display：none）

4.2.3 slideUp（）方法和slideDown（）方法

slideUp()方法和slideDown（）方法只会改变元素的高度。如果一个元素的display属性之为none，当调用slideDown时，这个元素将由上至下延伸显示。

4.2.4自定义动画方法animation（）

语法结构:animate（{params}，speed，callback）；

（1）params：一个包含样式属性及值的映射，比如{property1：”value“，property2：”value2“，。。。}

（2）speed：速度参数可选

（3）callback ：在动画完成时执行函数，可选

1.自定义简单动画

2累加，累减动画

之前设置了{left：”500px“}作为参数，如果在500px之前加上”+=“或者”-=“符号即表示在当前位置上累加和累减

3多重动画

（1）同时执行多个动画

改变animation（）的参数个数

$(this).animate({left:"500px",height:"200px"},3000);（2）按照顺序执行多个动画

$(this).animate({left:"500px"},3000);

$(this).animate({height:"200px"},3000);拆开分别执行或者改写为链式手法

$(this).animate({left:"500px"},3000).

.animate({height:"200px"},3000);这样就形成了”动画队列“4综合动画可以通过链式效果对动画进行排队4.2.5动画回调函数css（）方法不会加入到动画队列中，而是立即执行，可以使用回调函数callback对非动画方法实现排队，只要把css方法写在最后一个动画的回调函数上面就可以执行。callback回调函数适应于Jquery所有的动画效果方法

<style type="text/css">        #panel{            position: relative;            width: 100px;            height: 100px;            border:1px solid red;            background:#96E555;            cursor: pointer;            opacity: 0.5;        }    </style></head><body>    <div id="panel"></div>    <script>        $(function () {            $("#panel").click(function () {                $(this).animate({left:"500px",height:"200px",opacity:"1"},3000)                    .animate({top:"200px",width:"200px"},3000,function () {                        $(this).css("border","5px solid blue");                    })            })        })    </script></body>

4.2.6停止动画和判断是否处于动画状态1.停止元素动画stop（）方法  语法结构：stop（[clearQueue][,gotoEnd]）；两个参数都是可选参数，为boolean值  clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态如果直接使用stop（）方法，则会立即停止当前正在执行的动画，如果接下来还有动画等持续进行，则以但前状态开始接下来的动画。组合动画

<script>    $(function () {       $("#panel").hover(function () {           $(this).stop().animate({height:"150px",width:"300px"},2000).animate({width:"300"},300);       },function () {           $(this).stop().animate({height:"22px",width:"60px"},3000).animate({width:"60"},300);       })    })</script>此时只用一个不带参数的stop方法就有些力不从心了，我们使用第一个参数可以实现：程序会吧当前元素接下来尚未执行完的动画队列都清空。第二个参数（goEnd）可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过stop（false，true）这种方式来让当前动画直接到达末状态。

<script>    $(function () {       $("#panel").hover(function () {           $(this).stop().animate({height:"150px",width:"300px"},2000).animate({width:"300"},300);       },function () {           $(this).stop().animate({height:"22px",width:"60px"},3000).animate({width:"60"},300);       })    })</script>stop(true,true)即停止当前动画并直接到达当前动画的没状态，并清空动画队列。注意Jquery只能设置正在执行的动画的最终状态，而没有提供直接诶到达未执行动画队列最终状态的方法2判断元素是否处于动画状态当用户快速在某个元素是哪个执行animate（）动画时，就会出现动画累积，解决办法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。if（！$(element).is(":animated")）{//如果当前没有，则添加新的动画；}4.2.7其他动画方法   三种专门用于交互的动画方法toggle（speed，【callback】）；slideToggle（speed，[callback]）；fadeTo（speed，opacity，【callback】）；1.toggle（）方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的，如果元素是隐藏的，则切换为可见的；

<div id="panel">标题</div><h5 class="content">asdjflasdf</h5><script>    $(function () {       $("#panel").click(function () {           $(this).next("h5.content").toggle();       });    })</script>

2  slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。3.fadeTo（）方法可以把元素的不透明度以渐进的方式调整到指定的值，只调整不透明度fadeTo（400,0.6）//速度是400ms   透明度为0.6动画队列：一组元素上面的动画效果（1）一组元素上的动画效果当在一个animate（）方法中应用多个属性是，动画是同时发生的当以链式 的写法应用动画方法时，动画是按照顺序发生的。（2）多组元素上的动画默认情况下，动画是同时发生的当以回调方式应用动画时，动画是按照回调顺序发生的，另外，在动画方法中，要注意其他非动画方法会插队，可以讲这些方法写在回调函数中

Jquery中的动画

相关推荐