jQuery slideUp wirkt anders in Firefox & Safari

Question

Ich bin Junior in jQuery und CSS und ich kann einfach nicht herausfinden, warum meine slideUp() & slideDown() -Methoden verhalten sich in Chrome vs Firefox/Safari.

https://repl.it/J9yX

Für mein Portfolio-Projekt habe ich vertikal paar Bilder. Bei jedem Klick wird die Beschreibung div angezeigt (slideDown()), während die andere geöffnete Beschreibung verschwindet (slideUp()).

 $(".project").each(function(){ 
     $(this).click(()=>{ 
     $(".project").find('.projectDescription').slideUp() 

     setTimeout(()=>{ 
      $(this).find('.projectDescription').slideDown(400) 
     }, 400) 
     }) 
    }) 

in Chrome geklickt Bild nicht über dem oberen Rand der Seite geht, wie seine Beschreibung nach unten gleitet und die Beschreibung des vorherigen Bildes gleitet nach oben. Es wird von den Höhenänderungen des anderen Div beeinflusst, bis es den oberen Rand der Seite erreicht.
In Safari und Firefox wird das angeklickte Bild jedoch tatsächlich über den oberen Rand der Seite gelegt, wenn die andere geöffnete Beschreibung nach oben zeigt und ihre Höhe sich ändert.

• Beispiel: Firefox vs Chrome

würde ich mich sehr freuen, wenn Sie erklären könnte, warum und wie dieses Problem zu beheben.

Answer 1

Ich bin mir nicht sicher, welches Problem Sie haben und was Sie lösen möchten, weil Ihre Beschreibung ein wenig verwirrend ist ... aber lassen Sie mich es versuchen. Ich habe den Code korrigiert, der beim erneuten Klicken auf das gleiche Foto verschwindet und nicht heruntergleitet. Ich benutzen Flagge zu überprüfen, ob Benutzer gleich oder verschieden Foto geklickt und wenn es gleiche ist, überspringen Sie einfach den ganzen slideUp Teil:

var checkSame; 
$('.project').on('click', function() { 
    var photo = this.id; 
    if (photo != checkSame) { 
     $('.project').find('.projectDescription').slideUp(); 
    } 
    checkSame = photo; 
    $(this).find('.projectDescription').slideToggle(600); 
}); 

PS. Das nächste Mal verlinke nicht auf den "nur lesen" -Code;)