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

嗯。我冒昧地创造了一个小提琴。

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 2

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

Answer 3

好的，我感到惭愧。浏览器存在某种问题（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); } );

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

3 个答案: