jQuery 페이드 인/아웃 이미지 배경 글리치

Question

토글 가능한 배경을 가진 내 사이트의 특정 영역을 가지고 있지만 약간 이상하게 보입니다. 내 코드는 다른 오브젝트를 페이드 아웃 할 때 작동하지만이 경우에는 내 이미지에서 작동하지 않습니다. 내가 원하는 것 : 사용자가 내 버튼을 클릭 할 때마다 기능이 활성화됩니다. '버튼'텍스트가 '앱'인 경우 배경이 희미 해지고 게임이 페이드 인하려면 '게임'이라고 입력합니다. 동시에 텍스트의 색상 클래스도 fontcolor2에서 fontcolor1으로 변경하고 다른 하나는 길 주변에. 문제; 코드를 실행하면 첫 번째 클릭에서 작동합니다. 그 후 배경이 보통처럼 흐려지고 텍스트가 바뀝니다. 그러나 변경된 버튼을 클릭하면 이미지의 색이 바뀌지 않고 텍스트의 색이 바뀝니다.

글리치가있는 이미지는 gamesBG이고 시간은 bgFadeDuration입니다.

내 코드는 다음과 같습니다.

$('#togglega').click(function(){ 
    var bgFadeDuration = 300; 
    if ($('#togglega:contains(Apps)')) { 
     $('#nothingyet').css('display', 'none'); 
     jQuery('#gamesBG').fadeOut(bgFadeDuration); 
     $("#togglega").toggleClass('fontcolor2 fontcolor1'); 
     $("#sqtitle").toggleClass('fontcolor2 fontcolor1'); 
     $("#sl1ndp").toggleClass('fontcolor2 fontcolor1'); 
     $("#swtitle").toggleClass('fontcolor2 fontcolor1'); 
     $("#squl").toggleClass('fontcolor2 fontcolor1'); 
    } else if ($('#togglega:contains(Games)')){ 
     $('#nothingyet').css('display', 'block'); 
     jQuery('#gamesBG').fadeIn(bgFadeDuration); 
     $("#togglega").toggleClass('fontcolor1 fontcolor2'); 
     $("#sqtitle").toggleClass('fontcolor1 fontcolor2'); 
     $("#sl1ndp").toggleClass('fontcolor1 fontcolor2'); 
     $("#swtitle").toggleClass('fontcolor1 fontcolor2'); 
     $("#squl").toggleClass('fontcolor1 fontcolor2'); 
     jQuery('#bttimg1').css('opacity', '0'); 
     jQuery('#bttimg2').css('opacity', '0.7'); 
     jQuery('.gdb').css('color', '#212121'); 
    } else { 

    } 
}); 

어디에서 문제가 발생하며 코드가 작동하지 않습니다.

UPDATE 나는 자바 스크립트 기능을 사용하여 Games에 Apps에서 텍스트를 변경합니다. 함수는 다음과 같습니다. FIDDLE -

자바 스크립트

function togglegaclick(){ 
this.GamesChange = function(){ 
    togglebutton.innerHTML = 'Games'; 
    document.getElementById('towlabel').style.left = "60px"; 
    categorylabel.innerHTML = 'Apps'; 
    categorylabel.style.top = "17px"; 
    categorylabel.style.left = "100px"; 
} 
this.AppsChange = function(){ 
    togglebutton.innerHTML = 'Apps'; 
    document.getElementById('towlabel').style.left = "45px"; 
    categorylabel.innerHTML = 'Games'; 
    categorylabel.style.top = "20px"; 
    categorylabel.style.left = "80px"; 
} 
this.TitleFadeOut = function(){ 
    fadeEffect.init('toqlabel', 1, 0); 
    fadeEffect.init('sqtitle', 1, 0); 
} 
this.TitleFadeIn = function(){ 
    fadeEffect.init('toqlabel', 1, 100); 
    fadeEffect.init('sqtitle', 1, 100); 
} 
var togglebutton = document.getElementById('toqlabel'); 
var categorylabel = document.getElementById('sqtitle'); 
var gamesbox = document.getElementById('gamesbox'); 
if (togglebutton.innerHTML == 'Apps'){ 
    GamesChange(); 
}else{ 
    AppsChange(); 

} 

}

Answer 1

좋아, 이것이 당신이 찾고있는 경우 보자.

선택기를 .html()로 전환하고 .fadeToggle을 추가했습니다. 난 아직도 문제에 일하고 있어요 문제를 재현 할 수

JS

var bgFadeDuration = 1000; 

$('#togglega').on('click', function(){ 

    if($("#togglega").text() == "Games") 
    { 
    $('#nothingyet').css('display', 'block'); 
    $("#togglega").toggleClass('fontcolor1 fontcolor2'); 
    $('#gamesBG').fadeToggle(bgFadeDuration); 
    } 
    else if ($("#togglega").text() == "Apps") 
    { 
    $('#nothingyet').css('display', 'none'); 
    $('#gamesBG').fadeOut(bgFadeDuration); 
    $("#togglega").toggleClass('fontcolor2 fontcolor1'); 
    } 

             });