change image source with delay on mouseover and mouseout

Question

In my website I am using jQuery to change image. I have created jQuery to do so, Now i need to do is add smooth delay on mouseover and mouseout.

I know it Could be done with setTimeout() but confused how to get it done.

My Fiddle

For Reference

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

You can do it by using keyframe , and change background image

look to this:

Changing Background Image with CSS3 Animations

edited May 23 '17 at 10:34

Community

1
1

answered Oct 01 '16 at 09:44

Mahmoud D. Alghraibeh

1,507
2
10
10

In my case I am using wordpress plugin and it is really lengthy process to do so... I have to make changes in the plugin. Is it possible to do it with jquery please? – parish Oct 01 '16 at 09:51

score 0 · Accepted Answer · answered Oct 01 '16 at 09:55

0

jsfiddle

use $(".as-panel[data-index='0']") instead of $(this)

answered Oct 01 '16 at 09:55

THCoder

142
10

If you want don't want to use $(".as-panel[data-index='0']"), you can create a reference to it like this var this = $(".as-panel[data-index='0']"); before the setTimeout function – THCoder Oct 01 '16 at 10:00

score 0 · Answer 3 · answered Oct 01 '16 at 09:55

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

Its making my functionality of image slow. – parish Oct 01 '16 at 10:14 — parish, Oct 01 '16 at 10:14

change image source with delay on mouseover and mouseout

3 Answers3