0

スライドアウトするdiv間でアニメーション化するこのコードがあります。アイテムをクリックすると、関連するコンテンツがスライドアウトします。別の項目をクリックすると、現在のコンテンツがスライド インし、新しいコンテンツがスライド アウトします。

でも、

var lastClicked = null;
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) { 
      $('.each-brew.'+animCls).toggle(function() {
    if (lastClicked && lastClicked != this) {
        // animate it back
        $(lastClicked).trigger('click');
    }
    lastClicked = this;
    $('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000).css('position','inherit');
      }, function() {
           $('.each-brew-content.'+animCls)
                  .animate({ left: '-33.3333%' }, 1000, function() { $(this).hide()})  // hide the element in the animation on-complete callback
                  .css('position','relative'); 
      });
      })(animateClasses[i]);  //  self calling anonymous function
   }

ただし、既に開いているコンテンツがスライドして戻ると、コンテンツがスライドアウトするのが速すぎます。スライドアウトする前に、コンテンツが完全にスライドインするまで待つ必要があります。これは可能ですか？

これは、アイデアを得るために現在取り組んでいるものへのリンクです ( http://goo.gl/s8Tl6 )。

乾杯、R

4

4 に答える 4

1

これは、マークアップを変更せずにドロップインの代替品として使用する私の見解です。メニュー項目がクリックされたときに、次の 3 つのいずれかが発生するようにします。

  1. クリックしたアイテムが現在表示されている場合は、非表示にします
  2. 何か他のものが表示されている場合は、それを非表示にしてから、現在のアイテムのコンテンツを表示します
  3. 何も表示されていない場合は、現在のアイテムのコンテンツを表示します
var lastClicked = null;
// here lastClicked points to the currently visible content
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) {
          $('.each-brew.'+animCls).click(function(event){
              if(lastClicked && lastClicked == animCls){
                  // if the lastClicked is `this` then just hide the content
                  $('.each-brew-content.'+animCls).animate(
                                          { left: '-33.3333%' }, 1000,
                                          function() {
                                              $(this).hide();
                                          }).css('position','relative');
                  lastClicked = null;
              }else{
                  if(lastClicked){
                      // if something else is lastClicked, hide it,
                      //then trigger a click on the new target
                      $('.each-brew-content.'+lastClicked).animate(
                                          { left: '-33.3333%' }, 1000,
                                          function() {
                                              $(this).hide();
                                              $(event.target).trigger('click');
                                          }).css('position','relative');
                      lastClicked = null;
                  }else{
                      // if there is no currently visible div,
                      // show our content
                      $('.each-brew-content.'+animCls).show()
                                        .animate({ left: '0' }, 1000)
                                        .css('position','relative');
                    lastClicked = animCls;
                  }
              }
          });
      })(animateClasses[i]);  //  self calling anonymous function
   }
于 2013-02-17T04:09:55.310 に答える
0

イベントとオブザーバーがあなたのためにトリックをしてくれると思います。

アニメーションの完了時にコールバック関数を設定して、イベントを発生させます。

リスナーは最初にアニメーションイベントをリッスンし、そのイベントがトリガーされた後、完了イベントをリッスンします。完了イベントが発生したら、最初のアニメーションevent.runメソッド（または呼び出したいもの）を実行します。

newanimationeventtriger（new_anim）のリスナー内で、x秒間待機し（無限ループの可能性を排除するため）、この最後のイベントがトリガーされた場合== true {new_anim.run（）; }

于 2013-02-17T04:33:56.690 に答える
0

まあ、他にももっと簡単な可能性があると確信しており、あまり時間がありませんでしたが、ここに動作するjsfiddleがあります：http://jsfiddle.net/uaNKz/

callback基本的には、アニメーションが完了するまで待つ関数を使用します。この特別なケースでは、complete: function(){...}

$("document").ready(function(){
    $('#ale').click(function(){
        if ($('div').hasClass('toggled')){
          $('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){
            $('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');}
          }).removeClass('toggled');
        }else{
          $('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');
        }
    });
  $('#bramling').click(function(){
    if ($('div').hasClass('toggled')){
      $('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){
        $('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');}
      }).removeClass('toggled');
    }else{
      $('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');
    }
  });
});

toggleddivが展開されている場合、クラスを提供します。あなたのページのアニメーションはかなり壊れているように見えるので、これはこれを行うためのより良い方法だと思います. ただし、覚えておいてください: 私のコードはあまり良くありません。高速で、リファクタリングできます。それはうまくいっています..

于 2013-02-11T13:40:43.607 に答える
0

トグルを使用するのではなく、on "click" ハンドラーを ".each-brew" div にバインドします。ハンドラーで、最初にコンテンツ div を非表示にしてから、アニメーションの完了時に適切なコンテンツを表示します。プロミスまたはコールバックのいずれかを使用してそれを行うことができます。このようなもの...

 $(".each-brew").on("click", function (event) {
      $(".each-brew-content").show().animate({ left: "0" }, 1000, function() {
          // Get the brew name from the class list. 
          // This assumes that the brew is the second class in the list, as in your markup.
          var brew = event.currentTarget.className.split(/\s+/)[1];
          $(".each-brew-content." + brew).animate({ left: "-33.3333%" }, 1000, function() { $(this).hide(); });
      });
  });
于 2013-02-17T01:55:49.610 に答える