hover jQuery: la décoloration dans un div caché pendant la sortie en fondu une « par défaut »

Question

J'ai deux divs (l'un d'entre eux cachés avec CSS), que je suis Fondu sortant et à l'intérieur d'un espace alternance commun, le vol stationnaire.

Ceci 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 texte devient collante et ne sera pas disparaître - toujours que le mouvement de la souris est trop rapide

.

Savez-vous où peut-il être la solution?

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

Merci pour toute astuce

Answer 1

Si votre emballage ne dispose pas d'une largeur et la hauteur sur elle, vous pouvez obtenir des résultats étranges comme il se rétrécit une fois que l'élément d'image est supprimée. Pour voir, ajouter une bordure et hauteur / largeur fixe autour de l'enveloppe. Ou au moins utiliser la même hauteur pour les divs d'image et de texte.

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

ÉDITÉ

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

Answer 2

essayez d'utiliser .stop () sur votre fonction vol stationnaire-out, ce qui empêchera la condition de course où vous vous déplacez rapidement votre souris sur les 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 3

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 permettez-moi de vous donner une autre suggestion. Si votre intention est d'appliquer cet effet à diverses images utilisent la classe au lieu d'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, il vous suffit d'appeler cette fois.

Answer 4

Votre code ne se fane jamais la div texte. Les deux fonctions de l'événement de vol stationnaire se fanent l'image et à la décoloration dans le texte.

Answer 5

Vous avez le même code dans les deux fonctions hover. Vous ne devriez pas remplacer les sélecteurs dans le deuxième 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 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 ( comme on le voit ici ), mais rien n'a changé. Alors, voyant que toutes les habituelles instructions jQuery ne répondaient pas, je l'ai vérifié comme suggéré mon CSS.

Et il y avait l'affaire.

Ce que j'avais:

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

a été la mise en place d'un énorme espace vide que le navigateur interprétait comme « non encore laissé » par le curseur (j'ai remarqué que cet espace vide qui survolait faisait le texte pour répondre correctement).

Alors j'ai changé pour que:

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

Ce qui permet seule l'étiquette « p », 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