Question

我写了一个代码来改变悬停时的图像。

问题是当鼠标从一个“项目”快速移动到另一个“项目”时，它会弄乱图像。

如何解决这个问题？

HTML：

<div class="items">
    <div class="item">
        <a href="#">
            <img src="img/icon1.png" data-original="img/icon1.png" data-hover="img/icon1-hover.png">
            <span>Title</span>
        </a>
    </div>

    <div class="item">
        <a href="#">
            <img src="img/icon2.png" data-original="img/icon2.png" data-hover="img/icon2-hover.png">
            <span>Title</span>
        </a>
    </div>

</div>

JS：

$('.items .item a').hover(function(){
newsrc = $(this).children('img').data("hover");
$(this).children('img').fadeOut(100, function() {
    $(this).attr('src', newsrc).fadeIn();
}); 
}, function(){
    oldsrc = $(this).children('img').data("original");
    $(this).children('img').fadeOut(100, function() {
        $(this).attr('src', oldsrc).fadeIn();
    });
});

Answer 1

newsrc = $(this).children('img').data("hover");
oldsrc = $(this).children('img').data("original");

这两行在它们的前面没有var，这将导致它们没有作用于它们所处的功能，因此从图像到图像的快速交换可能会有一些流失，因为你正在共享变量。

将var放在它们的前面，使每个函数调用的变量都是唯一的。

var newsrc = $(this).children('img').data("hover");
var oldsrc = $(this).children('img').data("original");

Answer 2

我知道您已经使用jQuery询问了如何执行此操作，但请允许我提供其他解决方案。通常，当不需要使用javascript（尤其是现在的jQuery）时，如果我可以使用仅限CSS 获得相同的结果，我会尽量避免使用它。

我相信如果我理解正确的话，你试图用悬停图像淡入淡出来替换另一张图像。

下面的代码没有javascript就可以了。有一个陷阱，您将加载可能永远不会显示的图像，因此您可能希望延迟加载应该使用javascript淡入的图像。

祝你好运，力量可能伴随着你。

＆＃13;

 .items {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }  
 .items .item {
        width: 400px;
        height: 400px;
        display: block;
        position: relative;
    }
 .items .item span{
        position: absolute;
        left: 0;
        right: 0;
        top: 20px;
        text-align: center;

    }
 .items .item img:nth-child(2){
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity 1s;
    }
 .items .item:hover img:nth-child(2){
        opacity: 1;
    }

＆＃13;

    <div class="items">
        <div class="item">
            <a href="#">
                <img src="http://www.facetheforce.today/han-old/400" alt="Han Solo Old">
                <img src="http://www.facetheforce.today/han/400" alt="Han Solo">
                <span>Han Solo</span>
            </a>
        </div>
        <div class="item">
            <a href="#">
                <img src="http://www.facetheforce.today/luke-old/400" alt="Luke Old">
                <img src="http://www.facetheforce.today/luke/400" alt="Luke">
                <span>Luke</span>
            </a>
        </div>
    </div>

＆＃13;

如何在悬停时加速jQuery替换图像

2 个答案: