Maison >interface Web >js tutoriel >Solution au problème du déplacement entre deux éléments avec le même survol de la souris dans jQuery

Solution au problème du déplacement entre deux éléments avec le même survol de la souris dans jQuery

黄舟original: 2017-06-28 14:12:551233parcourir

Le problème du déplacement entre deux éléments avec le même survol de la souris dans jQuery

$(&#39;#d11,#d12&#39;).on(&#39;mouseover&#39;,function(){
                $(&#39;#d2&#39;).animate({opacity:&#39;100&#39;});
            });

Comme indiqué dans le code, lors du déplacement entre d11 et d12, animate s'exécutera L'objet est scintillement. Comment le résoudre? Le code détaillé est le suivant :


    
    Document
    
    
    
        
        
    
    
    <script>
        $(document).ready(function(){
            $(&amp;#39;#d11,#d12&amp;#39;).on(&amp;#39;mouseover&amp;#39;,function(){
                $(&amp;#39;#d2&amp;#39;).animate({opacity:&amp;#39;100&amp;#39;});
            });
            $(&#39;#d11,#d12&#39;).on(&#39;mouseout&#39;,function(){
                $(&#39;#d2&#39;).animate({opacity:&#39;0&#39;});
            });
        });    </script>

// 先终断之前的动画$(document).ready(function(){
    $(&#39;#d11,#d12&#39;).on(&#39;mouseover&#39;,function(){
        $(&#39;#d2&#39;).stop(true).animate({opacity:&#39;100&#39;});
    });
    $(&#39;#d11,#d12&#39;).on(&#39;mouseout&#39;,function(){
        $(&#39;#d2&#39;).stop(true).animate({opacity:&#39;0&#39;});
    });
});

Méthode 1 :

Pas besoin de js, ajoutez une phrase en css :

#d1:hover~#d2{opacity:1}

Mais vous il faut faire attention à la largeur d1...

Méthode 2 :
Ajoutez un nouveau class.opa1{opacity:1} puis utilisez addClass et removeClass.

Arrêtez l'animation avant d'animer. Ou utilisez .hover() encapsulé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La différence entre mouseover et mouseenter dans les événements jQueryArticle suivant：La différence entre mouseover et mouseenter dans les événements jQuery

Articles Liés

Voir plus