Add / Remove Class Fade funktioniert nicht - javascript, jquery, html, css, fade

Ich bin neu in der Entwicklung, also schont mich bitte :)

Ich habe begonnen, auf meiner E-Commerce-Plattform einen Schieberegler für den Körperhintergrund zu erstellen, mit dem ich hoffentlich irgendwann eine Auswahl von Körperhintergrundbildern durchgehen kann (noch nicht so weit).

Ich habe es geschafft, eine Seite zu erstellen, die Körper-Hintergrundbilder mit den Schaltflächen "Zurück" und "Weiter" umschaltet, indem ich Klassen entferne und hinzufüge, aber das Überblenden funktioniert nicht, siehe unten:

https://zoeyplayground-com.zoeysite.com/lookbook

Hier ist mein Code:

HTML

<script>
jQuery(document).ready(function() {
jQuery(".next").click(function() {
jQuery("body").removeClass("bodybackground1").fadeOut("slow");
jQuery("body").addClass("bodybackground2").fadeIn("slow");
});
});
</script>

<script>
jQuery(document).ready(function() {
jQuery(".back").click(function() {
jQuery("body").removeClass("bodybackground2").fadeOut("slow");
jQuery("body").addClass("bodybackground1").fadeIn("slow");
});
});
</script>

<div id="toggle" width="100%">
<img src="/images//media/import/back.png" class="back">
<img src="/images//media/import/next.png" class="next">
</div>

CSS

.bodybackground1 {
background: url("/media/import/background1.jpg") no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}

.bodybackground2 {
background: url("/media/import/background2.jpg") no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}

#toggle img {
margin-top: 400px;
display: inline;
}

#toggle .next {
float: right;
}

#toggle img:hover {
cursor: pointer;
opacity: 0.8;
}

Könnte jemand bitte erklären, warum das Ausblenden nicht funktioniert? Jede Anleitung oder jeder Rat wird geschätzt. Vielen Dank.

Antworten:

Du bist fast am Ziel. transition: all 0.5s; auf Ihrem .bodybackground* Klassen sollten sich um den Fade-Effekt kümmern. Es gibt nur 1 Problem, Ihre Übergangseigenschaft wird dadurch überschrieben #pix-fe Code.

#pix-fe {
...
transition: opacity .2s ease;
...
}

Sie sollten es überprüfen. Eine schnelle Lösung wäre, in Ihrem CSS Folgendes zu tun:

#pix-fe.bodybackground1 {
background: url("/media/import/background1.jpg") no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}

#pix-fe.bodybackground2 {
background: url("/media/import/background2.jpg") no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}