jQuery 动画-阿里云开发者社区

jQuery 动画

2014-12-22 727

简介： jQuery动画相关方法概况方法说明实例 hide()和show() 隐藏和显示 HTML 元素。

+关注继续查看

jQuery动画相关方法概况

方法	说明	实例
hide()和show()	隐藏和显示 HTML 元素。	$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
toggle()	可以使用 toggle() 方法来切换 hide() 和 show() 方法。	$("button").click(function(){ $("p").toggle(); });
fadeIn()和fadeOut()	淡入和淡出可见元素。	$("button").click(function(){ $("#div").fadeOut(3000); $("#div").fadeIn(3000); });
fadeToggle()	可以使用fadeToggle()方法来切换fadeIn() 与 fadeOut() 方法。	$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });
fadeTo()	fadeTo()方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。	$("button").click(function(){ $("#div1").fadeTo("slow",0.15); });
slideUp()和slideDown()	向上和向下滑动元素。	$("#flip").click(function(){ $("#panel").slideUp(1000); $("#panel").slideDown(1000); });
slideToggle()	可以使用 slideToggle() 方法来切换 slideUp() 与 slideDown() 方法。	$("#flip").click(function(){ $("#pane").slideToggle(); });
animate()	animate() 方法允许您创建自定义的动画。	$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'+=150px', width:'-=150px' }); });
stop()	stop() 方法用于在动画或效果完成前对它们进行停止。	$("#stop").click(function(){ $("#panel").stop(); });

显示/隐藏

（1）hide() 和 show()

在 jQuery 中，可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。

语法

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

注意：以下的speed和callback参数说明对于本文介绍的其他方法均适用。所以下文不再赘述。

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

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

范例代码

如下代码的作用是：点击按钮后，触发<p>元素的隐藏动作，速度为1000毫秒，动作结束后，弹出“已经隐藏”提示。

$("button").click(function(){
$("p").hide(1000, function(){
alert("已经隐藏");
});
});

（2）toggle()
在jQuery中，可以使用 toggle() 方法来切换 hide() 和 show() 方法。

语法

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

参数说明可以参考 hide() 和 show()。

淡入 / 淡出

（1）fadeIn() 和 fadeOut()

在 jQuery 中，可以使用 fadeIn() 和 fadeOut() 方法来淡入和淡出 HTML 元素。

语法

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);

参数说明可以参考 hide() 和 show()。

（2）fadeToggle()

在jQuery中，可以使用fadeToggle()方法来切换fadeIn() 与 fadeOut() 方法。

语法

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

参数说明可以参考 hide() 和 show()。

（3）fadeTo()

在jQuery中，fadeTo()方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法

$(selector).fadeTo(speed,opacity,callback);

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

其余参数说明可以参考 hide() 和 show()。

滑动

（1）slideUp() 和 slideDown()

在 jQuery 中，可以使用 slideUp() 和 slideDown() 方法来向上滑动、向下滑动元素。

语法

$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);

参数说明可以参考 hide() 和 show()。

（2）slideToggle()

在 jQuery 中，可以使用 slideToggle() 方法来切换 slideUp() 与 slideDown() 方法。

语法

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

参数说明可以参考 hide() 和 show()。

动画

animate()

在jQuery中，animate() 方法允许创建自定义的动画。

语法

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

其余参数说明可以参考 hide() 和 show()。

范例代码

$("button").click(function(){
    $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
    });
});

停止动画

stop()

在jQuery中，stop() 方法用于在动画或效果完成前对它们进行停止。

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。