jquery 学习之toggle(),toggleClass(),fadeToggle()，slideToggle()

2014-07-06

toggle()

功能：显示或隐藏匹配的元素

说明：匹配的元素将被揭示或立即隐藏，没有动画，通过改变CSS显示属性。如果在初始显示的元素，它会被隐藏;如果隐藏，它将会显示。 display属性被保存并在需要时恢复。如果元素具有内嵌的显示值，然后通过隐藏和显示，它会再次被内联显示。

持续时间是以毫秒为单位;值越高，动画越慢，不是越快。字符串’fast’和’慢’可分别提供给代表200持续时间和600毫秒。

如果提供，则回调被触发，一旦动画完成。这对于将不同的动画一起在序列是有用的。回调不发送任何参数，但它被设置为DOM元素被动画。如果多个元素的动画，需要注意的是回调执行每一次匹配的元素，没有一次为动画作为一个整体是很重要的。

$(selector).trigger(function)
The toggle() method was deprecated in jQuery version 1.8, and removed in version 1.9.

eg:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <meta charset="utf-8">
  <title>toggle</title>
</head>
<body>
  <p>点击我试试</p>
<script>
$("p").toggle(
  function(){$("p").css({"color":"red"});},
  function(){$("p").css({"color":"blue"});},
  function(){$("p").css({"color":"green"});
});
</script>
</body>
</html>

预览地址：http://jsbin.com/yedeku/1

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

eg：

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset=”utf-8”>
  <title>toggle</title>
</head>
<body>
  <p>Hello</p>
<p style=”display: none”>Good Bye</p>
<button>click me</button>
<script>
$(document).ready(function(){
  $(“button”).click(function(){
    $(“p”).toggle(300);
  });
});
</script>
</body>
</html>

代码地址：http://jsbin.com/yedeku/2

toggleClass()

toggleClass,切换class(一个或多个)，这里有两种用法

toggleClass(Class),在一个Class间切换

$(ClassA,ClassB).toggleClass(ClassA,ClassB)，在两个ClassA,ClassB之前切换

查看DEMO

fadeToggle()

.fadeToggle()方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none，所以元素不再影响页面的布局。

slideToggle()

.slideToggle()方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。