Question

我正在使用的代码有效，但是如果你在图像上过快地运行鼠标，它就会完全消失。不显示图像或在悬停时替换它的图像。只是一个空白。

有人有什么想法吗？

    $(document).ready(function(){
// Change the image of hoverable images
var openPng = $(".fadeim").attr("src");
var closedPng = openPng.replace(".png", "-hover.png");
$(".fadeim")
    .mouseover(function() {   
        $(this).fadeOut(350,function(){  
            $(this).attr("src", closedPng);  
            $(this).fadeIn(350);  
        });  
    })  
    .mouseout(function() {  
        $(this).fadeOut(350,function(){  
            $(this).attr("src", openPng);  
            $(this).fadeIn(350);           
        });  
    })  
});

Answer 1

您可以尝试fadeIn("fast")。您已经给出了350毫秒的时间，这可能会导致问题。

Answer 2

<强> SCRIPT

$(".imgHolder").mouseenter(function(){
      var $imgs = $(this).find("img");
      $imgs.first().fadeOut('slow');
      $imgs.last().fadeIn('slow');
    }).mouseleave(function(){
      var $imgs = $(this).find("img");
      $imgs.first().fadeIn('slow');
      $imgs.last().fadeOut('slow');
    }).find("img").last().hide();

的 CSS 的

.imgHolder img { position : absolute; }

的 HTML 的

<div class="imgHolder"> <img src="//placekitten.com/200/200"/> <img src="//placekitten.com/g/200/200/"/> </div>

使用JQuery在悬停时淡入另一个图像

2 个答案: