2011-08-07 5 views
1

これは私の問題です。 JQueryを使用してリアルタイムで自分のサイトの背景画像のグラデーションを更新したいのですが、同じプロパティの複数のフォールバックを更新する方法が見つかりません。私は、クロスブラウザのサポートのために、もちろん、複数のフォールバックが必要です。その後、私のjQueryのJQueryを使用して複数のフォールバックCSSプロパティを更新することはできますか?

#bg_gradient 
{ 
    background-color: #dcbebe; 

    background-image: url(images/fallback-gradient.png); 

    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#779eb0), to(#dcbebe)); 

    background-image: -webkit-linear-gradient(top, #779eb0, #dcbebe); 

    background-image: -moz-linear-gradient(top, #779eb0, #dcbebe); 

    background-image: -ms-linear-gradient(top, #779eb0, #dcbebe); 

    background-image: -o-linear-gradient(top, #779eb0, #dcbebe); 
} 

そして:ここに私のクラスは次のようになります。もちろん、

$('#bg_gradient').css('background-image','url(../gradient.png)'); 
$('#bg_gradient').css('background-image','-webkit-linear-gradient(top, #fff, #000)'); 
$('#bg_gradient').css('background-image','-moz-linear-gradient(top, #fff, #000)'); 
... 

、この方法を使用して、予想通り、同じ背景-imageプロパティは、単に上書きされます。

複数のフォールバックプロパティを動的に更新するにはどうすればよいですか?出来ますか?

更新:アルゴリズムを使用してグラジェントトランジションを生成しており、動的に更新する何百もの値があることを忘れていました。

答えて

1

は()私が直接スタイル属性を更新し、私は好きで渡すことができ、例えば、ここで私がやっているものです:

var wk = '-webkit-linear-gradient(top, ' + color_one + ',' + color_two + ')' 
$('#bg_gradient').attr('style', 'background-image:url(../image.png);background-image:' + wk); 
0

タグに同じ.cssを設定すると、それを上書きするだけであることを指摘しました。回避策(痛い)は、jQuery.browser flagsとjQuery.browser.versionを使って条件付きロジックを書くことです。 ATTRを呼び出すことにより、

0

あなたは解決策を発見した場合に更新してください。今のところ、2つの異なるクラスを使用することに反対し、それらのクラスを切り替えるだけですか?

+0

私はグラデーション間のトランジションを動的に生成していますので、何百もの値を持っています... attr()を直接設定すると、私のために働いています... – JimDaniel

関連する問題