Solution to the problem of moving between two elements with the same mouseover in jQuery

jQueryThe problem of moving between two elements with the same mouseover

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

As shown in the code, when moving between d11 and d12, animate will be executed as an object It's flashing, how to solve it. The detailed code is as follows:

    
    
    
    
    

        

        

    
    

    <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(){
    $('#d11,#d12').on('mouseover',function(){
        $('#d2').stop(true).animate({opacity:'100'});
    });
    $('#d11,#d12').on('mouseout',function(){
        $('#d2').stop(true).animate({opacity:'0'});
    });
});

Method 1:

No need for js, add a sentence to css:

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

But you have to pay attention to the d1 width...

Method 2:
Add a new class.opa1{opacity:1} and then use addClass and removeClass.

Stop the animation before animate. Or use encapsulated .hover()

The above is the detailed content of Solution to the problem of moving between two elements with the same mouseover in jQuery. For more information, please follow other related articles on the PHP Chinese website!