首页课程jQuery趣味课堂模块六:显示/隐藏,淡入,淡出

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

目录列表

显示/隐藏

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方法还有第二个可选参数可选,这是一个在动画完成后执行回调的方法。


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);


在2秒钟内将段落淡入60%的不透明度。

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

向上/向下滑动

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

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

例如:

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


在点击段落后,在3秒钟内滑动div元素。

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