Question

我正在尝试按菜单项更改背景图像。它现在有效，但问题是当再次单击相同的菜单botton背景图像disapper。我想我需要使用“if”但是在哪里，怎么样？抱歉我的英语不好这是Jquery：

//fadein when page opened
$(window).load(function(){

                    $('#wrapper').children('div:first').fadeIn(3000);

                    $('#wrapper').children('div:first').addClass('active');
                });

                //Change Background div
                $list.find('.menubutton a').bind('click',function(){
                    var $this = $(this);
                    var divid = $this.attr("alt");
                    $('#'+ divid).fadeIn(3000);
                    $('#wrapper').find('.active').removeClass('active').fadeOut(3000);
                    $('#'+ divid).addClass('active');
                });
            });

和HTML：

<div id="wrapper">
<div id="bg1" class="fullBg"></div>
<div id="bg2" class="fullBg"></div>
<div id="st_loading" class="st_loading"><span>Loading...</span></div>
<div id="logo"></div>
<div id="content">
    <div id="mainmenu">
        <div id="accordion">
        <div class="menubutton"><a class="menulink titilliumtext22l_thin" href="#" alt="bg1"><span>Menu 1</span></a></div>
        <div id="content1" class="component"></div>
        <div class="menubutton"><a class="menulink titilliumtext22l_thin" href="#" alt="bg2"><span>Menu 2</span></a></div>
        <div id="content2" class="component"></div>

和CSS：

div.fullBg{
    position:absolute;
    left:0px;
    top:0px;
    overflow: hidden;
    background-size:cover;
    height:100%;
    width:100%;
    display:none;
}
div.active {
    z-index:-99;
}
#bg1 {
    background:url(../images/album/1.jpg);
}
#bg2 {
    background:url(../images/album/2.jpg);
}

Answer 1

$('#wrapper').find('.active').removeClass('active').fadeOut(3000, function() {
        $('#'+ divid).addClass('active');
});

问题是你在fadeout执行之前设置了背景。像上面那样做，你就没有问题了。

Answer 2

fadeIn(3000)方法会使一个可见元素在淡入它之前不可见（alpha从0 - 1开始），因此第二次单击该按钮时，它会使背景不可见并再次淡入其中。你需要一个有条件的。试试这个：

$list.find('.menubutton a').bind('click',function(){
    var $this = $(this);
    var divid = $this.attr("alt");
    if ($('#' + divid).not(':visible')) {
        $('#'+ divid).fadeIn(3000);
        $('#wrapper').find('.active').removeClass('active').fadeOut(3000);
        $('#'+ divid).addClass('active');
    }
});

使用jquery更改背景图像（单击相同按钮时消失bg图像）

2 个答案: