如何隱藏和顯示分度，特殊效果

隨着Mr.Vytautas布特庫斯，我用他的代碼的參考，使用他的代碼，我可以得到垂直的效果，但我要顯示和隱藏的水平效果。如何隱藏和顯示分度，特殊效果

$(document).ready(function(){ 
     var $content = $(".content").hide(); 
     $(".toggle").on("click", function(e){ 
     $(this).toggleClass("expanded"); 
     $content.slideToggle(); 
     }); 
    })

所以請建議我該怎麼做水平隱藏和顯示效果的div？

來源

2013-07-11 AloNE

http://jqueryui.com/show/滑動？ – mishik

看到這個:: http://stackoverflow.com/questions/14470081/jquery-slidetoggle-horizontal-alternative –

Thnaks mishik和蘇德赫，我看到了兩個鏈接我的東西會爲我的工作讓我測試..！ – AloNE

的slideToggle確實效果基本show和向下。因此，使用.animate()代替.slideToggle()

您可以使用

$('selector').animate({width: 'toggle'});

您的代碼：

$(document).ready(function(){ 
      var $content = $(".content").hide(); 
      $(".toggle").on("click", function(e){ 
      $(this).toggleClass("expanded"); 
      $content.animate({width: 'toggle'}); 
      }); 
     })

來源

2013-07-11 05:51:01 Praveen

您可以通過擴大寬度做到這一點。如果你不想使用jQuery.animate函數，那麼你也可以通過使用CSS3轉換屬性來做到這一點。

來源

2013-07-11 05:52:43

我同意user1671639的響應。

但是，對於在iPad上流暢的動畫，你也可以用優異Transit在CSS3創建動畫簡單。

，並添加一個依傍常規的JavaScript動畫舊的瀏覽器IE9，包括。

來源

2013-07-11 05:55:46 Jaycreation

使用.toggle("slide")這樣的：

 var $content = $(".content").hide(); 
     $(".toggle").on("click", function(e){ 
     $(this).toggleClass("expanded"); 
     $content.toggle("slide"); 
     });

Here is the demo

來源

2013-07-11 05:57:50

如何隱藏和顯示分度，特殊效果

回答

相關問題