jQuery fadeIn（）fadeOut（）表现得像show（）和hide（）

-1

所以我有这个jQuery代码，我想要悬停某个图像，淡出图像和淡入淡出另一个绝对位置。jQuery fadeIn（）fadeOut（）表现得像show（）和hide（）

问题是funcions不会消失，而只是显示和隐藏图像。

的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); 
    } 
);

谢谢！

来源

2017-05-29 grcoder

你可以做一个小提琴或类似的东西，所以我们可以弄清楚发生了什么问题呢？ – Curiousdev

'.fadeOut'和'.fadeIn'从来不能很好地协同工作。尝试在第二个使用'.hide'的单元上使用'.fadeIn'。 –

您可以使用脚本将相关的HTML添加到代码段来演示该问题吗？ – Nope

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

来源

2017-05-29 10:49:35

这将'隐藏'/'show'元素，而不是'fadeIn' /'fadeOut'？ – Sandman

只用“淡出”代替“显示”代替“隐藏”和“淡入” –

虽然此代码可能回答此问题，但提供有关如何和/或为何解决问题的其他上下文会提高答案的长期值。 – Badacadabra

嗯。我自由地创造了一个小提琴。

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/

似乎为我工作得很好？你能指定你的结局出了什么问题吗？

问候克里斯

来源

2017-05-29 11:20:15 Chris

谢谢@kris。也许我在代码中有一些冲突。我会尝试调试它！ – grcoder

再次更新它以更正定位 – Chris

-1

好吧，我感到羞愧。有浏览器（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); } );

来源

2017-05-29 11:37:24 grcoder

jQuery fadeIn（）fadeOut（）表现得像show（）和hide（）

回答

相关问题