FadeIn happens multiple times automatically

Question

I my webpage I want background image to be changed each time when mouse hover happens on menu buttons. My code for it is like 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 the 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 the hover happens multiple back ground images fadeIn's not only the required one. Can any one point out what I am doing wrong here?

Answer 1

I think the problem is the animation queue, use .stop() to stop the execution of any previous animations in the 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 you are not doing any operation on mouseleave, use mouseenter event directly instead of using hover