jquery로 배경 이미지 변경 (동일한 버튼을 클릭하면 화면이 흐려집니다)

Question

메뉴 항목으로 배경 이미지를 변경하려고합니다. 이제는 작동하지만 문제는 동일한 메뉴 botton을 다시 클릭하여 배경 이미지 디아 퍼를 다시 클릭하는 것입니다. 나는 "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

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

Answer 2

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

문제가 페이드 아웃이 실행되기 전에 당신이 배경을 설정하는 것입니다. 위와 같이하면 아무런 문제가 없습니다.