jQuery hover : la décoloration caché dans un div, tandis que le fondu “par défaut” un

J'ai deux divs (dont l'un est caché par du CSS), que je suis en fondu en alternance à l'intérieur d'un espace commun, sur le 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 j'ai été l'application de cette jQuery code de la fermeture de 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 texte div devient collante et ne se fanera pas hors - toujours que le mouvement de la souris est trop rapide.

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

J'ai mis en ligne un test : http://paragraphe.org/stickytext/test.html

Merci pour tout conseil

InformationsquelleAutor Peanuts | 2009-07-23
  1. 3

    Si votre gestionnaire ne dispose pas de la largeur ET de la hauteur sur elle, vous pouvez obtenir des résultats étranges comme il se rétracte une fois l'image de l'élément est supprimé. À voir, ajouter une bordure fixe et hauteur /largeur autour de l'emballage. Ou au moins utiliser la même hauteur pour l'image et le texte divs.

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

    ÉDITÉ

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

    • ScottE - joli, le bug a été, en effet, dans le CSS, j'ai eu un position:relative pour le texte, j'ai changé pour un négatif de la marge supérieure, plus un float:left. Je vais définir la largeur et la hauteur trop, juste pour s'assurer qu'il.
    InformationsquelleAutor ScottE
  2. 3

    essayez d'utiliser .stop() sur votre hover-fonction, ce qui permettra d'éviter la course la condition où vous rapidement passez 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>
    • duckyflip - merci ! Ce qui semble empêcher le collant div. Cependant, les images de le trouver maintenant difficile de revenir à nouveau (parfois ils obtenir dans le milieu de la décoloration dans l')
    InformationsquelleAutor duckyflip
  3. 2

    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>

    Le jQuery file d'attente est par élément, donc ce que j'essaie de faire ici est de lancer les effets de texte, de l'image de la file d'attente.

    Et permettez-moi de vous donner une autre suggestion. Si votre intention est d'appliquer cet effet à une multitude d'images utilisation de 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 ne devez appeler cette fois.

    • Serhii - merci pour celui-là.
    InformationsquelleAutor Serxipc
  4. 0

    Votre code ne s'efface pas le texte de la div. Les deux fonctions de l'passez événement aura fondu de l'image et fondu dans le texte.

    • vrai ! désolé, je copie-collé le code ici trop vite. Allez à modifier que.
    InformationsquelleAutor Philippe Leybaert
  5. 0

    Vous avez le même code dans les deux hover fonctions. 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>
    • Yep, désolé les gars, je n'ai pas mis correctement ici les sélecteurs. Allez éditer correctement.
    InformationsquelleAutor RaYell
  6. 0

    merci pour tous les conseils :

    J'ai essayé d'utiliser le mouseenter /mouseleave, car ils semblent regarder dans le détail pour les divs, ils sont confrontés (comme on le voit ici), mais rien n'a changé. Alors, voyant que tous les habituelles jQuery instructions n'étaient pas répondre j'ai vérifié, comme l'a suggéré mon CSS.

    Et il y avait le truc.

    Ce que j'avais :

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

    été la mise en place d'un immense espace vide que le navigateur n'interprète comme "non de gauche" encore de par le curseur (j'ai remarqué que le survol de l'espace vide est ce qui rend le texte pour répondre correctement).

    J'ai donc changé pour :

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

    Qui permet à l' "p" tag seul, et les positions de la deuxième bloc dans le div, mais sans trace de l'espace vide derrière elle.

    Ensuite, concernant l'extrait de code, il fonctionnera aussi bien avec mouseenter /moseleave et passez :

    <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>

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

    • J'ai un léger problème avec la mienne, lors du premier chargement de la page, le texte (ce qui est censé être caché) est en haut de l'image. Jusqu'à ce que vous passez au-dessus et en dehors ça va fonctionner correctement. Comment puis-je cacher le texte lorsque le chargement de la page?
    InformationsquelleAutor Peanuts