jQuery复习—用动画和特效装扮页面（队列未整理）

标签：

用动画和特效装扮页面

一、显示和隐藏元素

设置元素的style.display属性（none/block/inline）

1、简单的改变元素显示和隐藏

（1）、显示 show()

（2）、隐藏 hide()

（3）、切换状态 toggle()

2、渐变的显示和隐藏元素

（1）、显示 show(speed,callback)

（2）、隐藏 hide(speed,callback)

（3）、切换状态 toggle(speed,callback)

参数说明：

speed: 数字或者字符串。可以是若干毫秒，也可以是slow、normal、fast

callback: 当动画结束时调用。将函数上下文（this)设置为当前执行动画元素。

二、使元素淡入和淡出

1、fadeIn(speed, callback)

将元素的不透明度提高到其初始值来时所有匹配的元素显示出来

2、fadeOut(speed, callback)

通过将元素的不透明度降级到0%，然后从显示器上删除该元素

3、fadeTo(speed, opacity, callback)

逐渐改变元素的不透明度，从它们当前的值到opacity指定的值

opacity: 将要调整的元素的目标不透明度，指定的取值范围是0.0-1.0

三、上下滑动元素

1、slideDown(speed, callback)

通过组建增加元素的垂直尺寸来使所有匹配的隐藏元素系那是出来，只有隐藏元素有影响

2、slideUp(speed, callback)

通过逐级减少元素的垂直尺寸来从显示器上删除匹配的显示元素

3、slideToggle(speed, callback)

在任何隐藏的包装元素上执行slideDown(),同时在任何显示的包装元素上执行slideUp()

四、停止动画

stop(clearQueue, goToEnd)

停止所匹配元素集合上正在进行的所有动画

五、自定义动画

animate(properties, duration ,easing, callback)

animate(properties, options)

将properties和easing参数指定的动画应用到包装集中的所有成员上。可以指定一个回调函数，在动画完成时调用。

参数：
properties: 对象，指定动画结束时所支持的css样式应该达到的值。通过调整元素的样式属性的当前值到散列对象中指定的值来产生动画（指定的目标值可以是绝对值也可以是相对于起点的值。为了指定相对值，要为目标值添加+=或者-=，分别代表正方向和负方向的相对目标。除了指定目标属性的值，也可以指定下列字符串之一：hide\show\toggle）

duration: 指定特效持续时间

easing: 指定动画滑动特效。核心jQuery提供了两个缓动函数，分别为linear和swing

常见的动画样式属性包括：top、left、width、height和opacity

$(‘.animateMe‘).each(function(){
	$(this).animate({
		width: $(this).width()*2,
		height: $(this).height()*2

	},2000)
})

jQuery复习—用动画和特效装扮页面（队列未整理）

标签：

原文地址：http://www.cnblogs.com/nankeyimeng/p/5374595.html