0%

4.3.4 切换可见性

发表于 更新于 分类于 ， ，

4.3.4 切换可见性

有时候,我们需要切换某些元素的可见性,而不像前面例子中那样只把它们显示出来。要实现切换,可以先检查匹配元素的可见性,然后再添加适当的方法。在此,仍然以淡入淡出效果为例,可以把示例脚本修改为如代码清单4-11所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() { 
  var $firstPara = $('p').eq(1); 
  $firstPara.hide();   
  $('a.more').click(function(event) { 
    event.preventDefault(); 
    if ($firstPara.is(':hidden')) { 
      $firstPara.fadeIn('slow');  
      $(this).text('read less'); 
    } else { 
      $firstPara.fadeOut('slow'); 
      $(this).text('read more'); 
    } 
  }); 
});

与我们在本章前面所做的一样,首先缓存选择符以避免重复遍历DOM。而且,这里也不再隐藏被单击的链接,而是修改它的文本。
使用if else语句切换元素的可见性是非常自然的方式。但通过jQuery复合效果方法,却不一定非要使用这个条件语句(尽管在这个例子中,需要条件语句来修改链接的文本) 。

jQuery提供了一个.toggle()方法,该方法的作用类似于.show()和.hide()方法,而且与它们一样的是,.toggle()方法时长参数也是可选的。
另一个复合方法是.slideToggle(),该方法通过逐渐增加或减少元素高度来显示或隐藏元素。代码清单4-12是使用.slideToggle()方法的脚本。

如何切换可见性

1.使用if else语句判断可见性,然后在调用显示,或隐藏方法实现
2.使用jQuery事项的方法实现,如下所示:

  • .toggle()方法可以可以切换显示/隐藏效果，可以理解为:交替执行.show()和.hide()这两个方法.
  • .slideToggle()方法可以切换滑上/滑下效果，可以理解为:交替执行:.slideDown()和.slideUp()这两个方法
  • .fadeToggle()方法可以切换淡入/淡出效果,可以理解为交替执行.fadeIn(),.fadeOut()这两个方法

原文链接: 4.3.4 切换可见性