javascript - FadeIn happens multiple times automatically -
i webpage want background image changed each time when mouse hover happens on menu buttons. code this
<div class="container-fluid "> <div id="home-banner-1" class="active-banner"> <div class="main-banner-wrapper"> <img src="images/frontpage_bg.jpg" class="upload"> </div> <div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text"> <p>thethe world.</p> </div> </div> <div id="home-banner-2" style="display:none"> <div class="main-banner-wrapper"> <img src="images/frontpage_bg_rigging.jpg" class="upload"> </div> <div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text"> <p>thethe world.</p> </div> </div> <div id="home-banner-3" style="display:none"> <div class="main-banner-wrapper"> <img src="images/frontpage_bg-hatches.jpg" class="upload"> </div> <div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text"> <p>the around world.</p> </div> </div> </div> <!--content--> <div class="container-fluid"> <div class="main-logo-panel"> <div class="box"> <div class="col-md-12 col-sm-12 "> <div class="col-md-3 col-sm-3 col-xs-4 main-logo"><img src="images/logo_frontpage.png" class="img-responsive"></div> <div class="col-md-9 col-sm-9 col-xs-8 main-menu"> <ul class="list-inline home-menu-list"> <li><a href="#" id="1">rigging</a></li> <li><a href="#" id="2">hatches </a></li> <li><a href="#" id="3">stoppers</a></li> </ul> </div> </div> </div> </div> </div> <script> $(document).ready(function () { $(".home-menu-list li a").hover(function () { var bannerclass = '#home-banner-' + $(this).attr('id'); $('.active-banner').fadeout(); $('.active-banner').removeclass('active-banner'); $(bannerclass).fadein(); $(bannerclass).addclass('active-banner'); }); }); </script>
everything looks okay, except when hover happens multiple ground images fadein's not required one. can 1 point out doing wrong here?
i think problem animation queue, use .stop() stop execution of previous animations in queue
$(document).ready(function () { $(".home-menu-list li a").mouseenter(function () { var bannerclass = '#home-banner-' + $(this).attr('id'); $('.active-banner').not(bannerclass).stop().fadeout().removeclass('active-banner'); $(bannerclass).stop().fadein().addclass('active-banner'); }); });
also since not doing operation on mouseleave
, use mouseenter
event directly instead of using hover
Comments
Post a Comment