Question

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

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

My Fiddle

For Reference

Answer 1

您可以使用关键帧进行操作，并更改背景图片

看看这个：

Changing Background Image with CSS3 Animations

Answer 2

jsfiddle

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

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

在鼠标悬停和鼠标移动时延迟更改图像源

3 个答案: