?

很多朋友對jquery toggle()比較熟練，甚至經常用到，而且對toggle的三個參數也比較了解$(selector).toggle(speed,callback,switch)。但是當你設置$(selector).toggle(200),給一個速度的時候，發現toggle是左右滑動的。但是它的參數中沒有設置方向的，如何讓toggle（）上下滑動呢？

解決方案

假如你對上面的說法比較贊同，那么，說明還對jquery的動畫效果不是很熟悉啊！哈哈哈。

其實，你翻閱資料，可以看到，jquery還有一個slideToggle（）熟悉，是對toggle（）的補充，兩個加入不設置時間，效果是一樣的，但是設置時間以后。toggle()是左右，從左只有出現和隱藏，但是slideToggle（）是垂直方向的顯示和隱藏，有了slideToggle（），就可以改變toggle（）的方向了啊！你想要淡入和淡出，可以用fadeToggle()，哈哈哈，這么多Toggle()，總可以達到你的要求了吧！

引深

同樣的道理，jquery的show()和hide（）方向怎么設置呢？同樣也可以用slideDown()和slideUp()來解決。達到你想要的效果！

jQuery之相關動畫效果操作

哈哈哈，加入你對上面的案例，在我說了之后不熟練，不熟悉的話，可以復習一下jquery的動畫效果了！下面我列舉一下！

1、show()顯示效果

語法：show(speed,callback)　　Number/String,Function　speend為動畫執行時間，單位為毫秒。也可以為slow","normal","fast"　callback可選,為當動畫完成時執行的函數。

show(speed,[easing],callback)　　Number/String　　easing默認是swing,可選linear; $("#div1").show(3000,function(){ alert("動畫顯示完成!"); });　　

　　　　

2、hide()隱藏效果

語法:hide(speed,callback)　　Number/String,Function

hide(speed,easing,callback)　　Number/String $("#div1").hide(3000,function(){ alert("動畫隱藏完成") });

3、toggle()隱藏顯示自動切換，當目前為顯示則隱藏，當目前為隱藏則顯示

語法：toggle(speed,callback)　　Number/String,Function

toggle(speed,callback)　　Number/String,String,Function $("#div1").toggle(3000,function(){ alert("動畫效果切換完成") });

　　　　　

4、slideDown()向下顯示，slow()是水平與垂直方向同時展開，而slideDown是僅僅在垂直方向向下展開

語法:slideDown(speed,callback)　　Number/String,Function

slideDown(speed,[easing],callback)　　Number/String,Function $("#div1").slideDown(3000,function(){ alert("向下展開顯示成功!"); });

5、slideUp()向上隱藏,　　hide()是水平與垂直兩個方向的，而slideUp()僅僅是垂直方向向上收起隱藏

語法:slideUp(speed,callback)　　Number/String,Function

slideUp(speed,[easing],callback)　　Number/String,String,Function $("#div1").slideUp(3000,function(){ alert("向上收起隱藏成功!"); })

6、slideToggle垂直方向上切換,toggle是水平與垂直兩個方向上的，而slideToggle是僅僅垂直方向的。

語法:slideToggle(speed,callback)　　Number/String,Function

slideToggle(speed,[easing],callback)　　Number/String,String,Function $("#div1").slideToggle(3000,function(){ alert("水平方向上切換成功"); });

　　　　

7、fadeIn() 以改變透明度來顯示

語法：fadeIn(speed,callback)　　　　Number/String,Function

fadeIn(speed,[easing],callback)　　Number/String,Function $("#div1").FadeIn(3000,function(){ alert("淡入顯示成功!"); });

8、fadeOut() 以改變透明度來隱藏

語法：fadeOut(speed,callback)　　 Number/String,Function

fadeOut(speed,[easing],callcack)　　 Number/String,String,Function $("#div1").fadeOut(3000,function(){ alert("淡出隱藏成功!"); });

9、fadeToggle() 以改變透明度來切換顯示隱藏狀態

語法: fadeToggle(speed,callback)　　Number/String,Function

fadeToggle(speed,[easing],callback)　　　　Number/String,Function $("#div1").fadeToggle(3000,function(){ alert("淡入淡出切換成功!"); });

10、fadeTo() 由指定的時間將透明度改變到指定的透明度

語法：fadeTo(speed,callback)　　　　Number/String,Function

fadeTo([speed],opacity,[easing],[fn])　　Number/String,Float,String,Function $("#div1").fadeTo(3000,0.22,function(){ alert("透明度改變成功!"); });

11、animate() 自定義動畫，一般來說數字變動都可以用于動畫。

語法：animate(params,speed,easing,callback);　　樣式參數，時間，可選擇，函數

$("#div1").animate({ width:300px,height,300px },3000); 其中params要用中括號括起來，可以使用的css樣式參數。注意要采用駱駝法則，如font-size要寫成fontSize。顏色漸變不支持。 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight maxWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent

12、stop() 停止正在執行動畫

stop([clearQueue],[gotoEnd]);　　兩個參數均為布爾值，第一個表示，是否停止動畫執行、第二個表示，如果停止，是否立即變為執行完成的狀態，如果設置為否，則停留在執行一半的狀態。

$("#div1").hide(5000)　　//此動畫正在執行 $("#div1").stop();　　　　//上一行代碼指定的動畫停止在一半狀態 $("#div1").stop(true,true);　　//停止當前動畫，同時動畫切換到完成執行狀態。

13、delay() 延遲執行動畫　　當一個動畫stop()了之后還能夠用delay()來延遲執行。從停止位置繼續執行。當然用原來的方法繼續執行也不可，不過沒有延時效果。

delay(duration,[queueName])　　設置一個延遲值來執行動畫　　Integer,String $("#div1").delay(3000).hide(3000);　　//表示在3000毫秒后執行hide(3000);

14、jQuery.fx.off　　//該屬性只是是否關閉當前頁面上的動畫,關閉動畫之后，沒有動畫效果，所有設置了執行時間的動畫會瞬間完成。注意此屬性出現的位置。出現的位置不同影響的范圍也不同。

$(function(){ 　　　　jQuery.fx.off = true;　　//屬性在事件外面，對頁面加載后執行的所有動畫有效 　　　　$("#div1").click(function(){　　//屬性如果寫在這里，僅僅對當前點擊事件無效，不影響其他事件的動畫 　　　　　　$("#div1").hide(3000);　　//注意由于jQuery.fx.off設置為了true,因此3000毫秒失效，相當于hide(); 　　　　 }); 　　})

15、jQuery.fx.interval　　//該屬性設置動畫的幀速，單位是毫秒，如果設置的時間越小，就越平滑。，屬性出現的位置同樣有影響范圍

$(function(){ 　　　　jQuery.fx.interval = 1000; 　　　　$("#div1").click(function(){　　 　　　　　　$("#div1").hide(3000);　　　//jQuery.fx.interval設置為1000，也就是1秒鐘，改變一次效果。　 　　　　 }); 　　 })


http://www.haorooms.com/post/jquery_toggle_dr

轉載于:https://www.cnblogs.com/whyuyan/p/5852161.html

總結

以上是生活随笔為你收集整理的jquery toggle()设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。