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 は、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" );
      });

ここにデモがあります

Answer 3

user1671639 さんの回答に同意します。

ただし、iPad で最もスムーズなアニメーションを作成するには、優れたTransitを使用して CSS3 でアニメーションを簡単に作成することもできます。

また、IE9 を含む古いブラウザー用に、通常の JavaScript アニメーションにフォールバックを追加します。