1

スライド バナーに jQuery サイクル プラグインを使用するページがあり、各スライド内には div ( #info) があり、ホバーすると背景色がアニメーション化されます。

また、switchClass を使用してページ上の 3 つの配色を切り替えようとしていますが、これにより の背景色も変更されます。これは#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/

あなたの要素（ホバー時）は、ELEMENT固有のプロパティである新しい背景を取得しているため、クラスレベルの背景色はそれをオーバーライドできません

より良い：

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

一番：

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

コメントインライン

于 2012-09-24T19:33:41.740 に答える