Set time delay between two frames on mouseover

I have to display two images for single mouseover. So when I mouseover to the image, first, the image is displayed then with a time delay of 5000, the image is needed to display for that same hover. Now on mouseout display the original image.

I am not so familiar with JavaScript and jQuery.

Can someone please give me some idea about how to do this.

What i did is,

开发者_如何学Python

 $('.image1').mouseover(function() {

    setInterval($(this).removeClass(.image1).addClass('image-over1'),5000);
    $(this).removeClass(.image1).addClass('image-over2');

    });
   $('.image1').mouseout(function() {
  $(this).removeClass('image-over1');  
    $(this).removeClass('image-over2').addClass(item);
    });


   $('.image1').click(function(){
    document.location='index.php?page='index.php'; 
    })

---

The .hover() function lets you specify both mouseover/mouseout at the same time, and you need to make a function for the setInterval:

$('.image1').hover(function(evt) {

  // mouse over function.

  // DOM Element that got the mouseover.
  var target = evt.target; 

  if (target.timer) {
    clearTimeout(target.timer);
    target.timer = null;
  }

  target.timer = setInterval(function() {

       // $(this) will not work here, since 'this' has changed.
       // depending on your css you shouldn't need to remove the '.image1'
       // class, just make sure .image-over1 and .image-over2 are
       // stronger selectors, or occur after .image1
       $('.image1').addClass('image-over2');    

       // at this point your element will be (just guessing <img>, could be
       // anything really:
       // <img class="image1 image-over1 image-over2" .../>

       // it's absolutely fine for the image to have all those classes as
       // long as your css is correct.       

   }, 5000);

    $('.image1').addClass('image-over1');

}, function(evt) {

   // mouse out function.

  // DOM Element that got the mouseout.
  var target = evt.target; 

  if (target.timer) {
    clearTimeout(target.timer);
    target.timer = null;
  }

   $('.image1').removeClass('image-over1');
   $('.image1').removeClass('image-over2');

 });


$('.image1').click(function(){ document.location='index.php?page='index.php'; })

---

First of all, I think there's a problem in your approach; if you remove the "image1" class from the element on a mouseover, then that element won't be matched by the $(".image1") selector for the mouseout. Is there a reason you need to remove it? If you do (i.e. if there is something defined on the class in the CSS that you need to disable), is there some other selector you could match on?

As to the time delay, if you're using a jQuery version greater than 1.4, you can use the .delay() function:

$('.image1').mouseover(function() {
 $(this).addClass('image-over1').delay(5000).addClass('image-over2');
});

---

Perhaps you to create an animated GIF of these images??? Then use a code similar to here: http://www.netmechanic.com/news/vol3/design_no10.htm

---

Even if the images are generated on fly, it is possible to programtically generate animated gif in PHP - see http://php.net/manual/en/function.imagegif.php