jQueryアニメーションに関するいくつかの問題

Question

jQueryで初めて作業していて、divでアニメーションを作成しようとしています。最初のアニメーションがうまく行くが、私はそれだけでリセットし元の位置にdiv要素を返したいときに、第2の1は（私はそれを把握するカント

私のjQuery：。。

$(document).ready(function() { 


// Row one - column one. 
$(document).on('click', '#row_one_column_one', function() { 

    $('#row_one_column_one').animate({ 
     left: '35%', 
     opacity: '0.9', 
     height: '500px', 
     width: '500px' 
    }); 

    $('#row_one_column_one_button').fadeIn(750); 
}); 

$(document).on('click', '#row_one_column_one_button', function() { 
    $('#row_one_column_one_button').fadeOut(250); 
    $('#row_one_column_one').animate({ 
     left: '100px', 
     opacity: '0.5', 
     height: '250px;' 
    }); 
}); 


}); 

私もバイオリンを作りました：https://jsfiddle.net/c1he2vb8/4/

は、私はまだnoobのだ私を惜しまください

Answer 1

これが原因でイベントdelgation（バブリング）、親のdivクリックがトリガされ、なぜそれがリセットされていることを、アニメーションイベントを再実行するのです。

0123イベントの伝播のためのマニュアルを参照してください

$(document).on('click', '#row_one_column_one_button', function(e) { 
     e.stopPropagation(); 
     $('#row_one_column_one_button').fadeOut(250); 
     $('#row_one_column_one').animate({ 
      left: '100px', 
      opacity: '0.5', 
      height: '250px;' 
     }); 
    }); 

：あなたが委任を停止し、「私をクリックし、」ボタンのクリックするだけでメソッドを実行するものとクリックボタンにe.stopPropagation()を追加する必要があり、この問題を解決するために

：https://developer.mozilla.org/en/DOM/event.stopPropagation

Answer 2

あなたの問題は、最初のアニメーションの後に、互いの上に横たわっているため、両方のjQuery関数がトリガーされるということです。

私は1つを取り除いとjQueryを使用して、アクティブなクラスを追加しました：

// Row one - column one. 
    $(document).on('click', '.test', function() { 

     $(this).animate({ 
      left: '35%', 
      opacity: '0.9', 
      height: '500px', 
      width: '500px' 
     }); 

     $(this).addClass("active"); 
    }); 

    $(document).on('click', '.test.active', function() { 
     $(this).animate({ 
      left: '100px', 
      opacity: '0.5', 
      height: '250px;', 
      left: '0%', 
        width: '14%', 
        height: '100%', 
      opacity: '1' 
     }); 
     $(this).removeClass("active"); 
    }); 

https://jsfiddle.net/c1he2vb8/11/