jQuery, Pause oder Reset nach Klick-Ereignis

Question

Ich mag dies falsch gehen, aber ich versuche, jQuery ein HTML-Element zu sagen, um xyz auf klicken zu tun. Ich bin in der Lage, XYZ zu arbeiten, aber ich möchte die Funktionen neu starten, nachdem ein neuer Klick initiiert wurde.

In diesem Beispiel habe ich ein Hauptbild, das Thumbnails hat. Wenn ein Daumennagel angeklickt wird, ändert sich das vorgestellte Bild und wirkt sich aus. Das Problem ist mit meinem aktuellen Code. Wenn Sie auf mehrere Miniaturansichten klicken, fügt das click -Ereignis einem que hinzu, das in der Reihenfolge verarbeitet werden soll.

$("div.thumb").click(function() { 
    var primary_image = $(this).attr("rel"); 
    $('div.main-image').effect("blind", {direction: "left" }, 500, function() { 
     $('div.main-image').html('<img src="' + primary_image + '"/>'); 
    }); 
    $('div.main-image').show("blind", {direction: "left" }, 200); 
}); 

Was ist der ideale Weg, dies zu erreichen?

---

JS Fiddle

---

Answer 1

prüfen dies bin vorbei:

$(document).ready(function() { 
 
    $(".thumb").click(function() { 
 
    var primary_image = $(this).attr('rel'); 
 
    $('.main-image').effect({ 
 
     effect: "blind", 
 
     direction: "left", 
 
     duration: 500, 
 
     queue: false, 
 
     complete: function() { 
 
     $('.main-image').html('<img src="' + primary_image + '"/>').show("blind", { 
 
      direction: "left" 
 
     }, 500); 
 
     } 
 
    }); 
 
    }); 
 
});

.main-image { 
 
    text-align: center; 
 
} 
 

 
.thumb-wrapper { 
 
    display: flex; 
 
    margin-top: 13px; 
 
} 
 

 
.thumb { 
 
    flex-grow: 1; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="thumb-wrapper"> 
 
    <div class="thumb" rel="//i.imgur.com/V8EUWYl.jpg"> 
 
    <img src="//i.imgur.com/b9l2d48.jpg"> 
 
    </div> 
 
    <div class="thumb" rel="https://i.imgur.com/BDyucxj.jpg"> 
 
    <img src="//i.imgur.com/1eLKcFX.jpg"> 
 
    </div> 
 
    <div class="thumb" rel="//i.imgur.com/17b7xgx.jpg"> 
 
    <img src="//i.imgur.com/OniG5jY.jpg"> 
 
    </div> 
 
    <div class="thumb" rel="//i.imgur.com/6YEazO3.jpg"> 
 
    <img src="//i.imgur.com/A8aVtpx.jpg"> 
 
    </div> 
 
</div> 
 

 
<div class="main-image"><img src="//i.imgur.com/V8EUWYl.jpg"></div>

Answer 2

Nach Dokumentation wird die Warteschlangenparameter standardmäßig auf true gesetzt. Einstellung sollte es falsch lösen das Problem

Bitte beachte, dass ich die Animationsoptionen als Objekt

$("div.thumb").click(function() { 
    var primary_image = $(this).attr("rel"); 

    $('div.main-image').effect({ 
     effect : "blind", 
     direction: "left", 
     duration: 500, 
     complete: function() { 
      $('div.main-image').html('<img src="' + primary_image + '"/>'); 
     }, 
     queue: false 
    }); 
    $('div.main-image').show("blind", {direction: "left" }, 200); 
});