hinzufügen/entfernen Klasse Fade funktioniert nicht

Question

ich für die Entwicklung neuer bin so gehen Sie einfach auf mir :)

Ich habe angefangen, einen Körper Hintergrund Schieber auf meiner E-Commerce-Plattform zu schaffen, die hoffentlich in der Lage, um schließlich blättern Sie durch eine Auswahl von Körperhintergrundbildern (noch nicht so weit).

Ich habe es geschafft, eine Seite zu erstellen, die durch das Entfernen und Hinzufügen von Klassen Körper Hintergrundbilder mit „Zurück“ und „Weiter“ Tasten schaltet aber die Überblendung nicht funktioniert, finden Sie unter:

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="/media/import/back.png" class="back"> 
<img src="/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; 
} 

erklären wäre in der Lage zu jemand bitte, warum die verblassen nicht funktioniert? Jede Anleitung oder Beratung wird geschätzt. Vielen Dank.

Answer 1

Sie sind fast da. transition: all 0.5s; auf Ihrem .bodybackground* Klassen sollten sich um den Fade-Effekt kümmern. Es gibt nur 1 Problem, Ihre Übergangseigenschaft wird durch diesen #pix-fe Code überschrieben.

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

Sie sollten es überprüfen. Eine schnelle Lösung wäre die folgend in Ihrem CSS 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; 
}