Question

我的网页我希望每次鼠标悬停发生在菜单按钮上时都要更改背景图像。我的代码是这样的

 <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>

一切看起来都不错，除非当悬停发生多个背景图像时，fadeIn不仅是必需的。谁能指出我在这里做错了什么？

Answer 1

我认为问题是动画队列，使用.stop（）来停止执行队列中任何先前的动画

$(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');
    });
});

此外，由于您未对mouseleave进行任何操作，请直接使用mouseenter事件，而不是使用hover

FadeIn会自动发生多次

1 个答案: