jQuery hover: disparaître dans un div caché tout en effaçant le "par défaut" un

Question

J'ai deux divs (un d'entre eux cachés avec CSS), que je suis en train de disparaître et d'alternance à l'intérieur d'un espace commun, en vol stationnaire.

C'est le balisage:

<div id="wrap"> 

    <div class="image"> 
     <img src="http://domain.com/images/image.png"> 
    </div> 

    <div class="text hide"> 
     <p>Text text text</p> 
    </div> 

</div> 

Et je postulais ce code jQuery pour faire disparaître l'image - et à la décoloration dans le texte, sur le vol stationnaire:

<script type="text/javascript"> 
$(function(){ 
$('#wrap').hover(
     function(){ 
      $('#wrap .image').fadeOut(100, function(){ 
       $('#wrap .text').fadeIn(100);       
      }); 
     }, 
     function(){ 
      $('#wrap .text').fadeOut(100, function(){ 
       $('#wrap .image').fadeIn(100);      
      }); 
     } 
     ); 
}); 
</script> 

Mais le problème est que le div de texte devient collant et ne disparaîtra pas - toujours que le mouvement de la souris est trop rapide. Savez-vous où peut-il être la solution à ce problème?

Je mis en place un test en ligne: http://paragraphe.org/stickytext/test.html

Merci pour toute astuce

Answer 1

Si votre emballage n » Si vous avez une largeur et une hauteur, vous pouvez obtenir des résultats étranges car il rétrécit une fois l'élément d'image supprimé. Pour voir, ajoutez une bordure et une hauteur/largeur fixe autour de l'encapsuleur. Ou au moins utiliser la même hauteur pour l'image et les divs de texte.

<style type="text/css"> 
#wrap { width: 200px; height: 200px; border: 1px solid black; } 
</style> 

ÉDITÉE

Suppression d'un exemple de code qui n'était pas applicable à ce que vous essayez d'accomplir.

Answer 2

Votre code ne se fane jamais la div texte. Les deux fonctions de l'événement hover vont fondre l'image et disparaître dans le texte.

Answer 3

Vous avez le même code dans les deux fonctions hover. Ne devriez-vous pas remplacer les sélecteurs dans le second cas?

<script type="text/javascript"> 
$(function(){ 
$('#wrap').hover(
    function(){ 
      $('#wrap .image').fadeOut(100, function(){ 
       $('#wrap.text').fadeIn(100); 
      }); 
    }, 
    function(){ 
      $('#wrap.text').fadeOut(100, function(){ 
       $('#wrap.image').fadeIn(100);            
      }); 
    } 
    ); 
}); 
</script> 

Answer 4

essayer d'utiliser .stop() sur votre fonction vol stationnaire-out, ce qui empêchera la course condition où vous vous déplacez rapidement votre souris sur l'divs

<script type="text/javascript"> 
$(function(){ 
$('#wrap').hover(
    function(){ 
      $('#wrap .image').fadeOut(100, function(){ 
       $('#wrap.text').fadeIn(100); 
      }); 
    }, 
    function(){ 
      $('#wrap.text').stop().fadeOut(100, function(){ 
       $('#wrap.image').stop().fadeIn(100);            
      }); 
    } 
    ); 
}); 
</script> 

Answer 5

Essayez d'utiliser la file d'attente:

<script type="text/javascript"> 
$(function(){ 
    $('#wrap').hover(
     function(){ 
      $('#wrap .image').stop(true).fadeOut(100); 
      $('#wrap .image').queue(function(){ 
       $('#wrap.text').fadeIn(100); 
       $(this).dequeue(); 
      }); 
     }, 
     function(){ 
      $('#wrap .image').stop(true).queue(function(){ 
       $('#wrap.text').fadeOut(100); 
       $(this).dequeue(); 
      }); 
      $('#wrap .image').fadeIn(100); 
     } 
    ); 
}); 
</script> 

La file d'attente jQuery est par élément, donc ce que je suis en train de faire ici est de lancer les effets de texte sous la file d'attente de l'image.

Et laissez-moi vous donner une autre suggestion. Si votre intention est d'appliquer cet effet à diverses images, utilisez la classe au lieu de l'id.

... 
    $('.wrap').hover(
     function(){ 
      var wrap = this; 
      $('.image', wrap).stop(true).fadeOut(100); 
      $('.image', wrap).queue(function(){ 
       $('.text', wrap).fadeIn(100); 
       $(this).dequeue(); 
      }); 
.... 

De cette façon, vous n'avez besoin de l'appeler qu'une seule fois.

Answer 6

merci pour tous les conseils:

j'ai essayé d'utiliser les mouseenter/événements MouseLeave, car ils semblent regarder en détail pour les divs qu'ils traitent (as seen here), mais rien n'a changé. Donc vu que toutes les instructions jQuery habituelles ne répondaient pas, j'ai vérifié comme suggéré mon CSS.

Et il y avait l'astuce.

Ce que j'avais:

.text p{position:relative; top:-370px; padding: 0 10px} 

était mise en place d'un énorme espace vide que le navigateur interprétait comme « non gauche encore » par le curseur (j'ai remarqué que le survol de cet espace vide faisait le texte répondre correctement).

donc j'ai changé pour que:

.text {margin-top:-370px; padding: 0 10px; float:left} 

Ce qui permet à l'étiquette « p » seul, et positionne le second bloc dans la div, mais sans trace de l'espace vide derrière elle.

Ensuite, en ce qui concerne l'extrait, il fonctionnera aussi bien avec mouseenter/moseleave et vol stationnaire:

<script type="text/javascript"> 
$(function(){ 
$('#wrap').mouseenter(
     function(){ 
      $('#wrap .image').fadeOut(100, function(){ 
       $('#wrap .text').fadeIn(100);       
      }); 
     } 
     ); 
$('#wrap').mouseleave(
     function(){ 
      $('#wrap .text').fadeOut(100, function(){ 
       $('#wrap .image').fadeIn(100);      
      }); 
     } 
     ); 
}); 
</script> 

Ceci est la version améliorée http://paragraphe.org/nice/test.html