jQuery fadeIn() fadeOut() verhält sich wie show() und hide()

Question

Also habe ich diesen jQuery Code, den ich auf ein bestimmtes Bild schweben möchte, dieses Bild ausbleichen und ein anderes, das in absoluter Position ist.

Das Problem ist, dass die Funktionen nicht verblassen, sondern nur die Bilder anzeigen und ausblenden.

Der HTML-Code

<div class="row"> 
    <div class="col"> 
    <img class="image-without-color"> 
    <img class="image-with-color"> 
    </div> 
    <div class="col"> 
    <img class="image-without-color"> 
    <img class="image-with-color"> 
    </div> 
</div> 

Die jQuery-Code:

$('.partner-logo-container').hover(
    function(){ 
    $(".image-without-color", this).fadeOut(250);  
    $(".image-with-color", this).fadeIn(250); 
    }, 
    function(){ 
    $(".image-with-color", this).fadeOut(250); 
    $(".image-without-color", this).fadeIn(250); 
    } 
); 

Thank you!

Answer 1

$(".partner-logo-container").hover(function(){ 
     $(".image-without-color").fadeOut(3000, function(){ 
      $(".image-with-color").fadeIn(3000) 
     }); 
    }); 

Answer 2

Hmm. Ich habe mir die Freiheit genommen, eine Geige zu schaffen.

HTML

<div class="row"> 
    <div class="col"> 
    <div class="partner-logo-container"> 


    <img class="image-without-color image" src="https://image.flaticon.com/icons/svg/417/417715.svg" style="width: 200px"> 
    <img class="image-with-color image" src="https://image.flaticon.com/icons/png/512/417/417746.png" style="width: 200px"> 
    </div> 
    </div> 
    <div class="col"> 
    <img class="image-without-color"> 
    <img class="image-with-color"> 
    </div> 
</div> 

javaScript

$('.partner-logo-container').hover(function(){ 
    $(".image-without-color", this).fadeOut(250);  
    $(".image-with-color", this).fadeIn(250); 
    }, function(){ 
    $(".image-with-color", this).fadeOut(250); 
    $(".image-without-color", this).fadeIn(250); 
    } 
); 

https://jsfiddle.net/0402ds79/5/

scheint gut für mich zu arbeiten? Können Sie angeben, was an Ihrem Ende schief gelaufen ist?

Grüße Chris

Answer 3

Ok, ich fühle mich beschämt. Es gab irgendeine Art von Problem mit dem Browser (Chrome). Ich habe neu gestartet und es hat angefangen zu arbeiten. Danke Ihnen allen für Ihre großartigen Lösungen!

Nur um anderen zu helfen. Sie sollten auch den stop() vor dem fadOut hinzufügen. Auf diese Weise wird die vorhergehende laufende Animation gestoppt.

wie folgt aus:

$('.partner-logo-container').hover(
    function(){ 
    $(".image-without-color", this).stop().fadeOut(250);  
    $(".image-with-color", this).stop().fadeIn(250); 
    }, 
    function(){ 
    $(".image-with-color", this).stop().fadeOut(250); 
    $(".image-without-color", this).stop().fadeIn(250); 
    } 
);