模块六:显示/隐藏,淡入,淡出

显示/隐藏

jQuery有一些易于实现的效果来创建动画。

hide()和show()方法用于隐藏和显示所选元素。

toggle()方法用于在隐藏和显示元素之间切换。

例如：

$(function() {
  $("p").click(function() {
    $("div").toggle();
  });
});

hide / show / toggle方法可以带一个速度参数,以毫秒为单位指定动画速度。

例如，我们为toggle方法传入一个1000毫秒的参数：

$(function() {
  $("p").click(function() {
    $("div").toggle(1000);
  });
});

hide / show / toggle方法还有第二个可选参数可选，这是一个在动画完成后执行回调的方法。

分钟

秒

毫秒

与hide / show方法类似，jQuery提供了fadeIn / fadeOut方法，它将一个元素淡入和淡出显示。

和toggle（）方法在隐藏和显示之间切换一样，fadeToggle（）方法可以在淡入淡出中进行切换。

让我们看看fadeToggle（）的实例：

$(function() {
  $("p").click(function() {
    $("div").fadeToggle(1000);
  });
});

和toggle（）一样，fadeToggle（）也具有两个可选参数：speed和callback。

用于衰落的另一种方法是fadeTo（），它允许衰减到给定的不透明度（0和1之间的值）。例如：$（"div").fadeTo（1500，0.7）;

$("p").fadeTo( , );

slideUp（）和slideDown（）方法用于在元素上创建滑动效果。

再次，类似于以前的切换方法，slideToggle（）方法提供在滑动效果之间切换，一样也有两个可选参数：速度和回调。

例如：

$(function() {
 $("p").click(function() {
   $("div").slideToggle(500);
 });
});

$("p"). (function() { ("div").slideDown( ); });