jQuery fadeIn（）fadeOut（）はshow（）とhide（）のように動作します

Question

このjQueryコードは、特定の画像にフェードアウトし、その画像をフェードアウトし、別のフェードアウトを絶対位置にします。

問題は、機能がフェードしていないことです。代わりに、画像を表示したり隠しているだけです。

HTMLコード

<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> 

のjQueryコード：

$('.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); 
    } 
); 

ありがとうございます！

Answer 1

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

Answer 2

Hmm。私はフィドルを作成する自由を取った。

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/

私のために正常に動作するようですか？最後に何がうまくいかないかを指定できますか？

ご挨拶クリス

Answer 3

[OK]を、私は恥じている。ブラウザにはという問題がありました。（Chrome）私は再開し、それは働き始めた。あなたの素晴らしいソリューションをありがとう！

他人を助けるだけです。また、fadOutの前にstop（）を追加する必要があります。これにより、以前実行していたアニメーションが停止します。このような

：

$('.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); 
    } 
);