jQuery 淡入/淡出图像背景故障

Question

我的网站中有一个特定区域具有可切换的背景，但它似乎有点小故障。我的代码在淡入淡出其他对象时有效，但在这种情况下它不适用于我的图像。 我想要什么：每当用户点击我的按钮时，功能就会被激活。如果“按钮”文本是“应用程序”，我希望背景淡出，如果它是“游戏”，则淡入。同时，我希望文本的颜色类也从 fontcolor2 更改为 @987654323 @ 反之亦然。 问题；当我运行代码时，第一次点击就可以工作。之后，背景会像往常一样淡出，文本也会发生变化。但是当我点击更改按钮时，文本的颜色会发生变化，而我的图像不会重新消失。

出现故障的图像称为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 {

    }
});

问题出在哪里，为什么我的代码不起作用？

更新 我使用 Javascript 函数将文本从 Apps 更改为 Games。函数如下；

Javascript

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

好的，让我们看看这是不是你要找的东西 - FIDDLE。

我将选择器切换到 .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');
    }

                                        });