本文共 1668 字，大约阅读时间需要 5 分钟。

一、隐藏、显示

hide() 和 show()  隐藏和显示 HTML 元素

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

jQuery toggle()   显示被隐藏的元素，并隐藏已显示的元素：

$(selector).toggle(speed,callback);

二 、淡入淡出

jQuery 拥有下面四种 fade 方法：

fadeIn(speed,callback) fadeOut(speed,callback) fadeToggle(speed,callback) fadeTo(speed,opacity,callback)    透明度介于0-1之间

$("button").click(function(){  $("#div1").fadeTo("slow",0.15);  $("#div2").fadeTo("slow",0.4);  $("#div3").fadeTo("slow",0.7);});

三 、滑动

jQuery 拥有以下滑动方法：

slideDown() slideUp() slideToggle()

四 、动画

jQuery animate() 方法用于创建自定义动画。

语法： $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。

1如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

2当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=： 实例 $("button").click(function(){   $("div").animate({     left:'250px',     height:'+=150px',     width:'+=150px'   }); }); ============================== jQuery animate() - 使用预定义的值 您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"： 实例 $("button").click(function(){   $("div").animate({     height:'toggle'   }); }); ==================================

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。 stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。 语法 $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 因此，默认地，stop() 会清除在被选元素上指定的当前动画。 下面的例子演示 stop() 方法，不带参数： 实例 $("#stop").click(function(){   $("#panel").stop(); });

转载地址：http://cjhgi.baihongyu.com/