Solution to the problem of moving between two elements with the same mouseover in jQuery-JS Tutorial-php.cn

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

黄舟

Release： 2017-06-28 14:12:55

Original

1270 people have browsed it

jQueryThe problem of moving between two elements with the same mouseover

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

Copy after login

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:


    
    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>

Copy after login

// 先终断之前的动画$(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;});
    });
});

Copy after login

Method 1:

No need for js, add a sentence to css:

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

Copy after login

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!