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

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 会上下滑动。所以使用.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" );
      });

这是演示

Answer 3

您可以通过扩大宽度来做到这一点。如果您不想使用 jQuery.animate 函数，那么您也可以使用 CSS3 过渡属性来执行此操作。

Answer 4

我同意 user1671639 的回复。

但是，为了在 iPad 上获得最流畅的动画效果，您还可以使用出色的Transit来简单地用 CSS3 创建动画。

并为包括 IE9 在内的旧浏览器添加对正常 JavaScript 动画的回退。