jQuery动画效果

1、jQuery隐藏显示：可以使用hide()和show()方法来隐藏和显示HTML元素。

1、show()显示

2、hide()隐藏  不占位置  本质是在行内样式表中添加了display:none样式

3、toogle() 切换显示隐藏

4、（1）$("#hide").click(function(){

$("p").hide();

});

（2）$("#show").click(function(){

$("p").show();

});

（3）$("#toogle").click(function(){

$("p").toogle();

});

2、jQuery淡入淡出：参数可以控制淡入淡出的时间

1、fadeIn()用于淡入已隐藏的元素

2、fadeOut()用于淡出可见元素  不占位置  本质是在行内样式表中添加了display:none样式

3、fadeToggle()可以在fadeIn()与fadeOut()方法之间进行切换

4、（1）$("button").click(function(){

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeOut(3000);

});

（2）$("button").click(function(){

("#div2").fadeToggle("fast");

});

3、jQuery滑动：

1、slideDown()方法用于向下滑动元素

2、slideUp()方法用于向上滑动元素

3、slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换

4、（1）$("#flip").click(function(){

$("#div1").slideDown();

$("#div1").slideUp();

});

（2）$("#flip").click(function(){

$("#panel").slideToggle();

})

4、jQuery自定义动画:无法实现颜色的变化（背景色、字体色）

1、animate()方法用于创建自定义动画 参数是对象

2、animate()方法有四个参数   (selector).animate({styles},speed,easing,callback)

（1）styles：必需。规定产生动画效果的一个或多个 CSS 属性/值。

（2）speed：可选，规定动画的速度。可能值：毫秒值、“slow”、“fast”

（3）easing：可选，规定在动画的不同点中元素的速度，默认值是 "swing"。可能值:“swing”、“linear”

（4）callback：可选，animate 函数执行完之后，要执行的函数。

3、$("button").click(function(){

$("div").animate({

left:'250px',opacity:'0.5',height:'150px',width:'150px'

});

});

5、stop方法

1、stop()方法用于停止动画或效果，在它们完成之前，适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。

2、$("#stop").click(function(){

$("#panel").stop();

});