1

我有一个使用 jQuery 循环插件作为滑动横幅的页面，每张幻灯片内部都有一个 div ( #info)，其背景颜色在悬停时动画。

我还尝试使用 switchClass 在页面上的三种配色方案之间切换，这也改变了 的背景颜色#info，这在悬停在火上之前效果很好#info，之后 switchClass 按钮不再起作用。

这是悬停的jQuery：

$('#info.default').hover(function(){
        $('#info.default').stop().animate({backgroundColor: '#CDBF21'}, 300);
        $('#info.default .description').stop().animate({color: '#444'}, 300);
    }, function() {
        $('#info.default').stop().animate({backgroundColor: '#203E52'}, 300);
        $('#info.default .description').stop().animate({color: '#fff'}, 300);
    });

这里是 switchClass 部分：

$('.coral-green-button').click(function(){
        $('#info.default').stop().switchClass("default", "coral-green", 1000 );
        $('#info.green-blue').stop().switchClass("green-blue", "coral-green", 1000 ); 
    });

$('.green-blue-button').click(function(){
        $('#info.coral-green').stop().switchClass("coral-green", "green-blue", 1000 );
        $('#info.default').stop().switchClass("default", "green-blue", 1000);
    });

$('.mustard-blue-button').click(function(){
        $('#info.coral-green').stop().switchClass("coral-green", "default", 1000);
        $('#info.green-blue').stop().switchClass("green-blue", "default", 1000);
    });

谢谢！

4

1 回答 1

0

我知道这并不完美，但这是朝着正确方向迈出的一步：

http://jsfiddle.net/Mutmatt/Q6zsm/19/

你的元素（悬停时）正在获得一个新的背景，它是一个元素特定的属性，因此类级别的背景颜色不能覆盖它

更好的：

http://jsfiddle.net/Mutmatt/Q6zsm/24/

最好的：

http://jsfiddle.net/Mutmatt/Q6zsm/49/

内联评论

于 2012-09-24T19:33:41.740 回答