JQuery toggle()

JQuery toggle()是一种特殊类型的方法，用于在hide()和show()方法之间进行切换。它显示隐藏的元素并隐藏显示的元素。

语法:

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

speed: 这是一个可选参数。它指定延迟的速度。可能的值是慢，快和毫秒。

easing: 它指定用于过渡的缓和功能。

callback: 也是可选参数。它指定在toggle()效果完成后要调用的函数。

display : 如果为true，则显示element。如果为false，则会隐藏该元素。

让我们以示例的方式查看JQuery切换效果。

 <!DOCTYPE html> 
 <html> 
 <head> 
 <script src="/ajax/libs/JQuery/1.11.2/JQuery.min.js"></script> 
 <script> 
 $(document).ready(function(){ 
     $("button").click(function(){ 
         $("div.d1").toggle(); 
     }); 
 }); 
 </script> 
 </head> 
 <body> 
 <button>Toggle</button> 
 <div class="d1" style="border:1px solid black;padding:10px;width:250px"> 
 <b>这是一首小诗: </b><br/>
 一闪一闪的小星星<br/>
 我想知道你是什么<br/>
 如此之高<br/>
 像天空中的钻石<br/>
 一闪一闪，一闪一闪的小星星<br/>
 我想知道你是什么
 </div> 
 </body> 
 </html>

输出:

这是一首小诗:

一闪一闪，一闪一闪的小星星

我怎么想知道你是什么

在如此高高的世界之上

就像天空中的钻石

闪烁，闪烁的小星星

我想知道你是什么

带有速度参数的JQuery toggle()效果

让我们看一下速度为1500毫秒的JQuery切换效果的示例。

 $(document).ready(function(){
      $("button").click(function(){
         $("div.d1").toggle(1500);
     });
 });

输出:

这是一首小诗:
一闪一闪，一闪一闪的小星星
我怎么想知道你是什么
在如此高高的世界之上
就像天空中的钻石
闪烁，闪烁的小星星
我想知道你是什么

JQuery fadeIn()

JQuery 动效