Question

There’s example: http://www.jquery4u.com/jquery-functions/setinterval-example/#.UHW6_IYY18E
Hover over RSS feedburner image – it will shake.

In my case i have 2 images:
non-hover.png, hover.png.

When a:link – it shows as background non-hover.png, when you hover it shows hover.png and with interval of 3 seconds it switches to non-hover.png (while cursor is still on this link), like endless loop, you hover and it switches non-hover.png to hover.png with 3 seconds interval.

I want jquery to switch between the two images every three seconds when the cursor is over the anchor.

SOLUTION.

    $(document).ready(function() {

      function pizdec() {
        setTimeout(function(){ $('.istina').css('background-image','url("<?php print $base_path . $directory ?>/img/istina.png")'); }, 500);
        $('.istina').css('background-image', 'url("<?php print $base_path . $directory ?>/img/istina-hover.png")');
      }

  var IntervalID;

  $('.istina').hover(function() {
    pizdec();
    IntervalID = setInterval(pizdec, 1000)
  }, function() {
      clearInterval(IntervalID);
    }
  )

});

Answer 1

You have two images, so I suppose you can achieve the effect using jQuery and a timer.

Bind custom functions with jQuery to the element to be invoked on mouse enter and leave. Use them to start and stop a timer, which can call the third function, replacing the images. Take a look at http://api.jquery.com/hover/ and http://www.w3schools.com/js/js_timing.asp for more information.

If you need any help with the code, let me know.