JQuery 动画效果集锦

2011-11-21 17:57 随风浪迹天涯阅读(1922) 评论(0) 编辑收藏举报

把js的一些动画效果进行了整理，期中有很多都是参考了网上的高人，甚至有些直接拿过来用了。再次谢过。当做自己的温习。

1. Show()和Hide()方法

Show()以及Hide()在jquery动画里应该是最最基本的动画了吧。如果调用hide()动画的话，会把css样式里的display改为none。

语法：$(selector).show(speed,callback)

参数

描述

speed

可选。规定元素从隐藏到完全可见的速度。默认为 "0"。可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

callback

可选。show 函数执行完之后，要执行的函数。
除非设置了 speed 参数，否则不能设置该参数。

参考资料：http://www.w3school.com.cn/jquery/effect_show.asp

注意事项：这个show可以用在有些元素把隐藏的了，比如通过 display:none等等，但是通过实验知道visibility：hidden 这个没有效果。

其实 show方法很好理解，就是把需要需要指定的元素可以在指定的时间里把它显示出来，特别好的是可以在指定的时间里显示出来（时间是毫秒），或者可以用三个变量来表示。要是在show里面没有值的话，那么这个动画会直接的蹦出来，没有缓慢的效果。而如果在里面加了值，就会慢慢的出来。

事例：

JS Code：

   <script type="text/javascript">
        $(function () {
            $("#Btn").click(function () {
                $("#div").show(2000);
            });
        })
    </script>

HTML Code：

<input id="Btn" type="button" value="button" />
    <div style="background-color: Yellow; width: 200px; height: 200px; display: none"
        id="div">
        You can't see me.!
  </div>

Hide() 的实现的主要方式和show()是一样的，只是一个显示出来，一个隐藏罢了。

$("#Btn").click(function () {
                $("#div2").hide(1000);
            });

当点击ID为btn这个按钮的时候，ID为div2 的这个空间隐藏（慢慢的隐藏）。

2. toggle()和 toggle(fn,fn…)

toggle: toggle()方法的效果就是切换元素的可见状态；即如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

Toggle(fn,fn)每次点击后依次调用函数；如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发调用函数的功能，不需要另外.click(fn)了，我一开始操作此函数时就犯了错。

语法：$(selector).toggle(speed,callback,switch)

参数	描述
speed	可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。可能的值：毫秒（比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。如果设置此参数，则无法使用 switch 参数。
callback	可选。toggle 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
switch	可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。 True - 显示所有元素 False - 隐藏所有元素如果设置此参数，则无法使用 speed 和 callback 参数。

参考资料：1.http://www.w3school.com.cn/jquery/effect_toggle.asp

2.http://api.jquery.com/toggle/

JS Code:

$(document).ready(function(){
  $("#test").toggle(function(){
    $("#content").hide('slow');
   },function(){
     $("#content").show('fast');
   });
});

　　HTML Code:

<p id="test"><input type="button" value="点击这里" /></p>
<p id="content" style="display:none">当点击上面的“点击这里“字样，这里的内容将隐藏与显示之间切换</p>

　3. SlideUp()和SlideDown

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。它们会改变元素的高度。

语法：$(selector).slideUp(speed,callback)

参数

描述

speed

可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "normal"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度（这样会创造滑动效果）。

callback

可选。slideUp 函数执行完之后，要执行的函数。

除非设置了 speed 参数，否则不能设置该参数。

JS Code

$(function () {
            $("#Btn").click(function () {
                $("#div2").slideUp("slow", function () {
                    alert("I'm go...");
                });
            });
        })

4. fadeIn()和fadeOut()组合

语法:fadeIn(speed, callback)

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。其实用法都和上面的一样。

5. 自定义动画方法----animate

可能有的时候，上面的方法并不能满足我们对平时开发的要求，所以需要我们子定义相应的动画来满足。

语法一：

参数	描述
styles	必需。规定产生动画效果的 CSS 样式和值。可能的 CSS 样式值（提供实例）： backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight maxWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
speed	可选。规定动画的速度。默认是 "normal"。可能的值：毫秒（比如 1500） "slow" "normal" "fast"
easing	可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数： swing linear
callback	可选。animate 函数执行完之后，要执行的函数。

语法二：

参数

描述

styles

必需。规定产生动画效果的 CSS 样式和值（同上）。

options

可选。规定动画的额外选项。

可能的值：

speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

在博客园的看到一篇有关animate的文章，如下：

animate(params, options) ：用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

参数：

paramsOptions：一组包含作为动画属性和终值的样式属性和及其值的集合

optionsOptions：一组包含动画选项的值的集合。

选项：

durationString,Number：(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easingString：(默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

completeFunction：在动画完成时执行的函数

stepCallback

queueBoolean(默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

事例代码1：

JS Code：

$("#go1").click(function(){
$("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
$("#go2").click(function(){
$("#block2").animate( { width: "90%"}, 1000 )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});

HTML Code：

<button id="go1">Animate Block1</button>
<button id="go2">Animate Block2</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>

　效果主要实现：第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体，一旦字体改变完毕后，边框的动画才开始。

事例代码2：

JS Code：

$("p").animate({
left: 50, opacity: 'show'
}, { duration: 500 });

　效果是：用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

动画引起的问题：jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数，在IE浏览器下有几处bug

解决方案：

1. 因position引起的问题

影响：IE全系列

症状：在需要slide的层中，如果存在position:absolute 或 position:relative 定位的层，在IE下，滑动过程中这些层不会随之显示和隐藏，效果动作完成之后，这些层才会一次性隐藏。

解决方法：没有别的办法，只能尽量不在其中使用绝对和相对定位，用别的方法实现需要的DIV定位

2. 因table元素引起的问题

影响：IE6、IE7

症状：直接对table元素加入滑动效果时，在部分IE版本下没有效果

解决方法：在table外部套一个div，对div元素添加滑动效果。

3.网页开头一定要加这段

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

JQuery 动画的原理：

jQuery.animate的每种动画过渡效果都是通过easing函数实现的。jQuery1.4.2中就预置了两个这样的函数：

easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}

从参数名隐约可以推测出firstNum是初始值。要是你的数学学得比较好，你可以发现linear函数是直线方程；要是你的物理学得比较好，你可以发现它是匀速运动的位移方程,那么diff和p就是速度和时间了。

再看看jQuery.animate的原型：

animate: function( prop, speed, easing, callback )

各参数的说明如下：

prop：一组包含作为动画属性和终值的样式属性和及其值的集合。

speed：动画时长。

easing：要使用的擦除效果的名称。

callback：动画完成时执行的函数。

元素的当前样式值（firstNum）可以获取，动画时长（p）就是duration，最终样式值是prop。理论上说，动画速度（diff）是可以算出来的。但是这又必然需要另一个函数进行运算。这样做明显是不明智的。再看看调用easing函数的相关代码（位于 jQuery.fx.prototype.step中）：

var t = now()；

...

var n = t - this.startTime;

this.state = n / this.options.duration;

...

this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);

可以发现，p参数的值也就是this.state的值，从上下文得知它实际上是动画的时间进度。而firstNum和diff的参数值都是写死的，分别是0和1。这下easing函数的秘密完全被解开，p、firstNum、diff都是百分率而非实际数值，easing函数的返回值也就是位移的进度。diff的值是1，也就是以1倍的速度运行动画。算出位移进度后，通过“初始值+（最终值-初始值）×进度”就可以算出当前位移值：

this.now = this.start + ((this.end - this.start) * this.pos);

通过setInterval每隔一定时间（jQuery中是13ms）进行一次位移运算，直到当前时间与初始时间的差值大于动画时长，这就是jQuery.animate的执行过程。

按照常规思路，动画的实现方式是这样的：通过setInterval每隔一定时间给某个值增加特定数值，直到这个值达到限制值。这样做的主要问题是，不同浏览器的运行速度不同，从而导致动画速度有差异，一般是IE下比较慢，Firefox下比较快。而jQuery.animate是以当前时间来决定位移值，某个时刻的位移值总是固定的，因而动画速度不会有差异。

会员力量，点亮园子希望

刷新页面返回顶部

浪迹天涯

JQuery 动画效果集锦

1. Show()和Hide()方法

2. toggle()和 toggle(fn,fn…)

3. SlideUp()和SlideDown

4. fadeIn()和fadeOut()组合

5. 自定义动画方法----animate

About

　3. SlideUp()和SlideDown