jqueryアニメーションへの引数としてスタイルを渡す

Question

私はホバーで要素を処理する関数を持っていますが、私は引数としてCSSスタイルを渡すことができるようにしたい。私はさまざまなバリエーションを試してみましたが、これは現在、私のコード（ちょうど必要な部分）である...

function load_hovers(mouseOverCss){ 
    $('.hover').hover(function(){ 
    $(this).animate({ 
     eval(mouseOverCss) 
    }, 500, function() { 
    }); 

を

と私は、これはエラーを返しinvalid object initializer $(this).animate({load_hovers("backgroundColor: 'red'");

を呼び出します。 evalを使用しない場合、エラーはmissing : after property id {eval(mouseOverCss)}\nです。

提案がありますか？

Answer 1

を得ましたそれ。ちょうど）（アニメーションプレフォーマットされた文字列を送信しないの経路上に私を取得するための

var mouseOverCss = {}; 
mouseOverCss['backgroundColor'] = 'red'; 
mouseOverCss['paddingLeft'] = '100px'; 
load_hovers(mouseOverCss); 

してからちょうど

$(this).animate(mouseOverCss, duration); 

感謝フィル！

Answer 2

Evalオプション（Evalは邪悪なものです）から離れて、代わりにあなたのメソッドにオブジェクトを渡してみてください。

まず、あなたのCSSの引数にオブジェクトを作成します。

var css = {}; 
css.Property = 'backgroundColor'; 
css.Value = 'Red'; 

を（あなたが複数のプロパティが必要な場合、またはそれらの配列）次に、あなたの方法にこれを渡すことができます。

function load_hovers(classes) 
{ 
    $('.hover').hover(function(){ 
     $(this).animate({ 
     $(this).css(classes.Property, classes.Value); // or iterate over an array of these 
     }, 500, function() { 
     }); 
    }); 
}