Question

实际上在产品页面中，我们希望减少服务器上的负担，只有在鼠标悬停2到3秒后才能显示图像。因此，如果用户将光标悬停，我们应该在2秒后点击服务器并带上新图像。但是下面的代码没有按照我们的期望工作。

HTML标记：

<img class="rollover-images" data-rollover="{bringNewImage()}" src="{bringOldImage()}" />

使用Javascript：

$('.rollover-images').each(function() {

        var newSrc = $(this).data('rollover');
        if(newSrc == 0) return;

        var timeout, oldSrc;
        $(this).hover(function() {

            timeout = setTimeout(function() {

                oldSrc = $(this).attr('src');
                $(this).attr('src', newSrc).stop(true,true).hide().fadeIn(1);

            }, 2000);

        }, function() {

            clearTimeout(timeout);
            $(this).attr('src', oldSrc).stop(true,true).hide().fadeIn(1);

        });

    });

Answer 1

发布的代码有几个问题

您不能为HTML属性添加javascript函数，并期望它被函数返回值替换。所以你的HTML应该是

<img class="rollover-images" data-rollover="new.png" src="old.png" />

你在超时功能中有这个问题。由于您已经开始了一个新的函数范围，因此它的值不会成为您的img节点。所以你的JS应该是

$(this).hover(function () {
    var self = this
    timeout = setTimeout(function () {
        oldSrc = $(self).attr('src');
        $(self).attr('src', newSrc).stop(true, true).hide().fadeIn(1);
    }, 2000);
}, function () {
    clearTimeout(timeout);
    $(this).attr('src', oldSrc).stop(true, true).hide().fadeIn(1);
});

请注意，我们定义了一个名为self的新变量，该变量在setTimeout调用中使用。

如何延时翻转图像？

1 个答案: