tiempo de retardo ajustado entre dos marcos en mouseover

Question

Tengo que mostrar dos imágenes de un solo mouseover. Así que cuando me mouseover a la imagen, en primer lugar, la imagen se muestra a continuación, con un retardo de tiempo de 5000, se necesita la imagen para mostrar para ese mismo vuelo estacionario. Ahora en mouseout mostrar la imagen original.

No estoy tan familiarizado con JavaScript y jQuery.
Por favor alguien puede dar alguna idea acerca de cómo hacer esto.

Lo que hice es,

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

La función .hover() le permite especificar tanto mouseover / mouseout al mismo tiempo, y hay que hacer una función para la 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 2

En primer lugar, creo que hay un problema en su enfoque; si se quita la clase "imagen1" desde el elemento en un mouseover, entonces ese elemento no se corresponde con el $ (". imagen1" ) selector para el mouseout. ¿Hay alguna razón, tiene que quitarlo? Si lo hace (es decir, si hay algo definido en la clase en el CSS que es necesario deshabilitar), ¿hay algún otro selector que podría coincidir con el?

En cuanto al lapso de tiempo, si está utilizando una versión de jQuery mayor que 1,4, puede utilizar la función .delay ():

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

Answer 3

Tal vez para crear un GIF animado de estas imágenes ??? A continuación, utilice un código similar al aquí: http://www.netmechanic.com/news/vol3 /design_no10.htm

Answer 4

Incluso si las imágenes se generan en marcha, es posible generar programtically gif animado en PHP - vea http://php.net/manual/en/function.imagegif.php