Einige Probleme mit einer jQuery-Animation

Question

Ich arbeite zum ersten Mal mit jQuery und ich versuche, eine Animation auf einem div zu machen. .. Die erste Animation geht gut, aber die zweite (wenn ich die div in seine ursprüngliche Position zurückkehren wollen es nur setzt Ich kann es herausfinden

Meine 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;' 
    }); 
}); 


}); 

Ich habe auch eine Geige : https://jsfiddle.net/c1he2vb8/4/

Bitte ersparen sie mir, dass ich noch ein noob bin

Answer 1

Dies wegen Ereignis delgation (Sprudeln), wird das Zurücksetzen der übergeordnete div Klick auslöst und erneute Ausführung der Animation Ereignis, das, warum es..

Um dieses Problem Sie müssen zu beheben e.stopPropagation() auf den Knopf drücken, um hinzuzufügen, die die Übertragung stoppen soll, und führen Sie nur die Klick-Methode des „Klick mich“ Button:

$(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;' 
     }); 
    }); 

die Dokumentation für Ereignispropagierung prüfen : https://developer.mozilla.org/en/DOM/event.stopPropagation

Answer 2

Ihr Problem ist, dass nach Ihrer ersten Animation beide jQuery-Funktionen ausgelöst werden, weil sie übereinander liegen.

Ich entfernte ein und fügte hinzu, eine aktive Klasse mit 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/