Блог

Я пытаюсь изменить фоновое изображение с помощью пункта меню. Сейчас это работает, но проблема в том, что при нажатии на то же меню снова отключается фоновое изображение. Я думаю, мне нужно использовать «если», но где, как? и извините за мой плохой английский. Вот 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);
}
  

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

проблема в том, что вы устанавливаете фон перед выполнением fadeout. сделайте это, как указано выше, и у вас не возникнет проблем.

fadeIn(3000) Метод сделает видимый элемент невидимым перед его исчезновением (альфа от 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');
    }
});