jQuery特效-基本

备注：方法的参数类型，见 jQuery特效-方法参数类型

.hide()

隐藏匹配的元素

.hide()

.hide( [duration ] [, complete ] )

.hide( options )

.hide( [duration ] [, easing ] [, complete ] )

没有参数的.hide()方法是最简单的方法来隐藏对象。

$('.target').hide();

匹配元素会被立刻隐藏，没有动画的样式。这大致和调用.css('display','none')一样。除了display的属性值会被保存在jQuery的data缓存中，以至于display以后能够被设置成最初的值。如果一个元素的display的值是inline，然后被隐藏和显示，它会再次被显示成inline样式。
当一个持续的时间（duration），一个纯对象（plain object）或者一个complete函数被提供，.hide()就会成为动画方法。.hide()方法会同时的变化元素高度，宽度和透明度。当这些属性值到了0时，display的样式的属性会被设置为none来确保该元素不会影响页面的布局。
注意：.hide()方法会立刻执行，并且如果没有持续时间，或者持续时间指定为0时会覆盖该动画队列。

<script>
$("p").hide();
$("a").click(function ( event ) {
event.preventDefault();
$(this).hide();//不带参数，立刻隐藏
});
</script>

<script>
$("button").click(function () {
$("p").hide("slow");//slow的执行隐藏
});
</script>

<script>
$("#hidr").click(function () {
$("span:last-child").hide("fast", function () {
// use callee so don't have to name the function
$(this).prev().hide("fast", arguments.callee);
});
});
$("#showr").click(function () {
$("span").show(2000);
});
</script>

.show()

显示匹配的元素

.show()

.show( [duration ] [, complete ] )

.show( options )
.show( [duration ] [, easing ] [, complete ] )

未提供参数，.show()方法是最简单的方式来显示元素：

$('.target').show();

匹配元素会被立刻显示，没有动画的样式。这大致和调用.css('display', 'block')一样。除了display的属性值会被保存在jQuery的data缓存中，以至于display以后能够被设置成最初的值。如果一个元素的display的值是inline，然后被隐藏和显示，它会再次被显示成inline样式。
Note:如果在你的样式中使用!important，如display: none !important，那就有必要重写样式.css('display', 'block !important')，这样.show()才能够正常的运行。
当持续时间(duration),简单对象（plain object）或者complete函数被提供时，.show()就会成为执行动画的方法。.show()方法同时的影响匹配元素的宽度，高度，透明度。

<script>
$("button").click(function () {
$("p").show("slow");//缓慢显示
});
</script>

<script>
$("#showr").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext); //依次调用显示div元素
});
});
$("#hidr").click(function () {
$("div").hide(1000);
});
</script>

<script>
function doIt() {
$("span,div").show("slow");
}
/* can pass in function name */
$("button").click(doIt);
$("form").submit(function () {
if ($("input").val() == "yes") { //验证提交input中的值若为yes时，显示信息
$("p").show(4000, function () {
$(this).text("Ok, DONE! (now showing)");
});
}
$("span,div").hide("fast");
/* to stop the submit */
return false;
});
</script>

.toggle()

显示或隐藏匹配元素

.toggle( [duration ] [, complete ] )

.toggle( options )

.toggle( [duration ] [, easing ] [, complete ] )

.toggle( showOrHide )

未提供参数，.toggle()方法是最简单的方式来显示元素：

$('.target').toggle();

匹配元素会立刻的显示或隐藏，不会执行动画，通过改变CSS的display属性。如果最初是显示的，它会被隐藏；如果是隐藏的，它会被显示。在需要的时候，display属性会被保存和重新恢复值。如果一个元素的display的值是inline，然后被隐藏和显示，它会再次被inline显示。

当持续时间(duration),简单对象（plain object）或者complete函数被提供时，.toggle()就会成为执行动画的方法。.toggle()方法同时的影响匹配元素的宽度，高度，透明度。当这些属性值到了0时，display的样式的属性会被设置为none来确保该元素不会影响页面的布局。

<script>
$("button").click(function () {
$("p").toggle();//no param
});
</script>

<script>
$("button").click(function () {
$("p").toggle("slow");//slow
});
</script>

<script>
var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 2 == 0 );//判断flip++ % 2 == 0的boolean值，true显示
});
</script>