Установить задержку между двумя кадрами при наведении курсора

Question

Мне нужно отобразить два изображения для одного mouseover.Таким образом, когда я mouseover к изображению, сначала изображение отображается затем с задержкой 5000, изображение необходимо для отображения для того же наведения.Теперь на mouseout отобразите исходное изображение.

Я не очень знаком с JavaScript и jQuery.
Может кто-нибудь подсказать, как это сделать.

То, что я сделал,

 $('.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'; 
    })

Answer 1

Даже если изображения генерируются на лету, можно программно генерировать анимированный GIF в PHP - см. http://php.net/manual/en/function.imagegif.php

Answer 2

Функция .hover() позволяет одновременно указывать указатель мыши или указатель мыши, и вам необходимо создать функцию для 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'; })

Answer 3

Может быть, вы создать анимированный GIF из этих изображений ??? Затем используйте код, подобный следующему: http://www.netmechanic.com/news/vol3/design_no10.htm

Answer 4

Прежде всего, я думаю, что есть проблема в вашем подходе;если вы удалите класс «image1» из элемента при наведении курсора, этот элемент не будет сопоставлен селектору $ (". image1") для указателя мыши.Есть ли причина, по которой вам нужно это удалить?Если вы это сделаете (то есть, если в CSS есть что-то определенное в классе, которое нужно отключить), есть ли какой-то другой селектор, с которым вы могли бы сопоставить?версия jQuery больше 1.4, вы можете использовать функцию .delay ():

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