Question

I’m trying to make changing background image by menu item. It’s works now but the problem is when click the same menu botton again background image disapper. I think i need to use “if” but where, how? and sorry for my bad english.
Here is the 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');
                });
            });

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

and 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

The fadeIn(3000) method will make a visible element invisible before fading it in (alpha from 0 – 1), so the second time you click the button, it makes the background invisible and fades it in again. You need a conditional. try this:

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