Question

参考Mr.Vytautas Butkus，我已经使用了他的代码，使用他的代码我可以得到垂直效果，但我想要显示和隐藏的水平效果。

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

所以请建议我怎么做水平隐藏和显示div的效果？

Answer 1

slideToggle执行slideUp和down。因此，请使用.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'});
          });
        })

Answer 2

像这样使用.toggle( "slide" )：

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

<强> Here is the demo

Answer 3

您可以通过扩展宽度来实现此目的。如果您不想使用jQuery.animate函数，那么您也可以使用CSS3过渡属性来执行此操作。

Answer 4

我同意user1671639的回复。

但是，对于iPad上最流畅的动画，你也可以使用优秀的Transit来简单地在CSS3中创建动画。

为旧版浏览器（包括IE9）添加普通JavaScript动画。

如何隐藏和显示具有特殊效果的div

4 个答案: