Définir le délai entre deux images au survol de la souris

Question

Je dois afficher deux images pour mouseover. Donc, quand je mouseover à l'image, d'abord, l'image est affichée puis avec une temporisation de 5000, l'image est nécessaire pour afficher pour ce même vol stationnaire. Maintenant sur mouseout afficher l'image originale. Je ne suis pas si familier avec JavaScript et jQuery.
Quelqu'un peut-il s'il vous plaît me donner une idée sur la façon de le faire.

est-ce que je faisais,

$('.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 fonction .hover() vous permet de spécifier les deux mouseover/mouseout à en même temps, et vous avez besoin de faire une fonction pour le 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

D'abord, je pense qu'il ya un problème dans votre approche; Si vous supprimez la classe "image1" de l'élément au passage de la souris, cet élément ne sera pas reconnu par le sélecteur $ (". image1") pour le passage au curseur. Y a-t-il une raison pour laquelle vous devez l'enlever? Si vous le faites (c'est-à-dire s'il y a quelque chose de défini sur la classe dans le CSS que vous devez désactiver), y a-t-il un autre sélecteur sur lequel vous pouvez faire correspondre?

En ce qui concerne le délai, si vous utilisez une version jQuery supérieure à 1,4, vous pouvez utiliser la fonction .delay():

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

Answer 3

peut-être vous pour créer un GIF animé de ces images ??? Ensuite, utilisez un code similaire ici: http://www.netmechanic.com/news/vol3/design_no10.htm

Answer 4

Même si les images sont générées à la volée, il est possible de générer programtically gif animé en PHP - voir http://php.net/manual/en/function.imagegif.php