Question

我的网站中有一个具有可切换背景的特定区域，但似乎有点毛病。我的代码适用于淡入其他对象的淡入淡出，但在这种情况下，它不适用于我的图像。 我想要的是什么：每当用户点击我的按钮时，功能就会被激活。如果＆＃34;按钮＆＃34;文字是＆＃34;应用＆＃34;我希望背景淡出，如果它是＆＃34;游戏＆＃34;淡入淡出。与此同时，我希望文本的颜色类也可以从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 {

    }
});

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

更新我使用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');
    }

                                        });

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

1 个答案: