在 mouseover 和 mouseout 上延迟更改图像源答案

【问题标题】：change image source with delay on mouseover and mouseout在 mouseover 和 mouseout 上延迟更改图像源
【发布时间】：2016-10-01 17:55:44
【问题描述】：

在我的网站中，我使用 jQuery 来更改图像。为此我创建了 jQuery，现在我需要在 mouseover 和 mouseout 上添加平滑延迟。

我知道可以使用 setTimeout() 完成，但对如何完成感到困惑。

My Fiddle

For Reference

【问题讨论】：

标签： jquery

【解决方案1】：

jsfiddle

使用$(".as-panel[data-index='0']") 而不是$(this)

【讨论】：

如果你不想使用 $(".as-panel[data-index='0']")，你可以像这样创建一个对它的引用 var this = $( ".as-panel[数据索引='0']");在 setTimeout 函数之前

【解决方案2】：

你可以通过使用关键帧来做到这一点，并改变背景图像

看看这个：

Changing Background Image with CSS3 Animations

【讨论】：

在我的情况下，我使用的是 wordpress 插件，这样做真的很漫长……我必须在插件中进行更改。请问可以用jquery吗？

【解决方案3】：

Try this

    $(".as-panel[data-index='0']").mouseover(function() {
    $( "span" ).text( "That was index #");
    pausecomp(500);
    $(this).find("img").attr('src','http://www.kerry-beaches.com/images/contact-me-facebook-thumbnail.jpeg');


    });

    function pausecomp(millis)
    {
        var date = new Date();
        var curDate = null;
        do { curDate = new Date(); }
        while(curDate-date < millis);
    }


    $(".as-panel[data-index='0']").mouseout(function() {
      // `this` is the DOM element that was clicked
                $( "span" ).text( "That wasindex #");
        pausecomp(500);     
     $(this).find("img").attr('src','http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png');


    });
    //http://www.kerry-beaches.com/images/contact-me-facebook-thumbnail.jpeg

【讨论】：

它让我的图像功能变慢了。