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

Question

在我的网站中，我使用jQuery来更改图像。 我已经创建了jQuery来做到这一点，现在我需要做的是在mouseover和mouseout上添加平滑延迟。

我知道这可以用setTimeout()完成，但困惑如何完成它。

My Fiddle

For Reference

Answer 1

jsfiddle

使用$(".as-panel[data-index='0']")代替$(this)

Answer 2

您可以通过使用关键帧做到这一点，并更改背景图片

看看这个：

Changing Background Image with CSS3 Animations

Answer 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