title: Set time delay between two frames on mouseover
body: <p>I have to display two images for single <code>mouseover</code>. So when I <code>mouseover</code> 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 <code>mouseout</code> display the original image.  </p>
  
  <p>I am not so familiar with JavaScript and jQuery.<br>
  Can someone please give me some idea about how to do this.  </p>
  
  <p>What i did is,</p>
  
  <pre><code> $('.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'; 
      })
  </code></pre>