jQuery Verlangsamung removeClass

Question

Ich habe diese jQuery-Funktion, mit der ich auf ein Bild klicken kann und eine CSS-Klasse angewendet wird. Wenn auf ein anderes Element mit derselben Klasse geklickt wird, wird die gleiche Klasse des vorherigen Elements entfernt. Es funktioniert gut, außer ich muss auf das Element zweimal klicken, bevor die exampleimgopen Klasse angewendet wird.

Ich denke, der Fehler hat etwas mit der Reihenfolge in der Funktion zu tun, aber ich bin mir nicht sicher, was falsch ist. Hier

ist die jQuery:

jQuery(document).ready(function($) { 
    $('.exampleimg').click(function() { 
     $('.exampleimgopen').removeClass('exampleimgopen'); 
     $(this).toggleClass('exampleimgopen'); 
     $('.exampleimg').toggleClass('exampleimgclose'); 
    }); 
}); 

Hier ist die html:

<div id="examples"> 
     <p>Examples:</p> 
     <img src="img/1.png" class="exampleimg"> 
     <img src="img/2.png" class="exampleimg"> 
     <img src="img/3.png" class="exampleimg"> 
     <img src="img/4.png" class="exampleimg"> 
     <img src="img/5.png" class="exampleimg"> 
     <img src="img/6.png" class="exampleimg"> 
    </div> 

Hier ist die CSS:

#examples { 
    background-color:white; 
    color:black; 
    text-align:center; 
    padding:5px 5px 5px 5px; 
} 

.exampleimg { 
    padding:10px 0px 10px 0px; 
    width:300px; 
    margin:0 20px 0 20px; 
} 

.exampleimg:hover { 
    opacity:0.8; 
    cursor:pointer; 
} 

.exampleimgopen { 
    width:620px; 
    transition: 0.5s ease; 
} 

.exampleimgclose { 
    width:300px; 
    transition: 0.5s ease; 
} 

Answer 1

Sie das Problem durch die Vereinfachung des Code zu beheben, zum Beispiel Sie müssen exampleimgclose nicht hinzufügen, wenn das Bild geschlossen ist (weil Ihre Stile angeben, dass es nur eine Breite und einen Übergang hat, nicht wirklich geschlossen). Danach müssen Sie nur steuern, ob eine Klasse zum Bild hinzugefügt wird, wenn es tatsächlich geöffnet wird.

Sehen Sie diese JSFIDDLE Ich machte für Sie, und lesen Sie Kommentare, die ich neben JavaScript-Code platziert.

Relevante Code auch unter:

HTML:

<div id="examples"> 
    <p>Examples:</p> 
    <img src="http://placehold.it/620x100" class="example-img"> 
    <img src="http://placehold.it/620x100" class="example-img"> 
    <img src="http://placehold.it/620x100" class="example-img"> 
</div> 

CSS:

#examples { 
    background-color: white; 
    color: black; 
    text-align: center; 
    padding: 5px 5px 5px 5px; 
} 

.example-img { 
    padding: 10px 0px 10px 0px; 
    width: 300px; 
    margin: 0 20px 0 20px; 
    transition: 0.5s width ease; 
} 

.example-img:hover { 
    opacity: 0.8; 
    cursor: pointer; 
} 

.example-img-open { 
    width: 620px; 
} 

JavaScript:

jQuery(document).ready(function($) { 
    $('.example-img').click(function() { 
    // When clicking an image which is already open, close it 
    if ($(this).hasClass("example-img-open")) { 
     $(this).removeClass("example-img-open"); 
    } 
    // When clicking an image which is not yet open, open it and close all previously opened 
    else { 
     $('.example-img').removeClass("example-img-open"); // Closes all others 
     $(this).addClass("example-img-open"); 
    } 
    }); 
}); 

Sie auch bemerkt haben, dass ich verschiedene Namen verwendet für t er unterrichtet. Ich tat das nur, weil es schwer war, den vorherigen Code zu lesen, Sie können sie ändern, wie Sie wollen.

Prost.

Answer 2

Das ist eigentlich ziemlich einfach.

Verwenden Sie in Ihrem CSS .exampleimg Übergangsbreite. Keine Notwendigkeit für zusätzliche Klassen auf Ihren img Elementen.

Wie so:

.exampleimg { 
    padding:10px 0px 10px 0px; 
    width:300px; 
    margin:0 20px 0 20px; 
    transition: width 500ms; // substitute 500ms for whatever you require 
} 

Nun bearbeiten alle Ihre HTMLimg Elemente wie folgt aussehen:

<img src="img/1.png" class="exampleimg" onClick="enlarge();"> <!-- notice onclick event !--> 

Du bist jQuery jetzt ein wenig entlang der Linien gehen von:

function enlarge(){ 
    if(!$(this).hasClass('exampleimgopen')){ // if clicked image isn't enlarged 
     $('.exampleimg').removeClass('exampleimgopen'); // make all other image smaller 
     $(this).addClass('exampleimgopen'); // make this image larger 
    } else { // if image is enlarged 
     $(this).removeClass('exampleimgopen'); // make the image smaller 
    } 
} 

Hoffe das hilft!

Wenn der Benutzer nun auf das Bild klickt, sollte es es vergrößern und alle anderen ausgewählten Bilder verkleinern. Wenn sie auf ein bereits vergrößertes Bild klicken, wird es wieder verkleinert.

Nicht nur das, sie sollten alle um 500 Millisekunden einweichen.

Answer 3

Check out this fiddle

Sie sind in der Nähe - es ist nur, dass die Klassen nicht ganz richtig hinzugefügt/entfernt werden.

Hier ist eine Möglichkeit, es zu tun, dass (von der Geige) arbeitet

jQuery(document).ready(function($) { 
    $('.exampleimg').click(function() { 
     $('.exampleimg').removeClass('exampleimgopen exampleimgclose'); 
     $(this).addClass('exampleimgopen'); 
     $('.exampleimg').not(this).addClass('exampleimgclose'); 
    }); 
}); 

Answer 4

Entfernen Sie in Ihrer Handlermethode click einfach die offene Klasse aus allen img.exampleimg Elementen. Fügen Sie die close Klasse allen img.exampleimg Elementen hinzu, und führen Sie das genaue Gegenteil zum aktuell angeklickten Element aus.

jQuery(document).ready(function($) { 
    $('.exampleimg').click(function() { 
     $('.exampleimg').removeClass('exampleimgopen').addClass('exampleimgclose');  
     $(this).addClass('exampleimgopen').removeClass('exampleimgclose') 
    }); 
});