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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -