jquery 애니메이트

Question

에 인수로 스타일을 전달하므로 hover로 요소를 처리 할 수있는 기능을 갖지만 CSS 스타일을 인수로 전달할 수 있기를 원합니다. 내가 다른 변화를 시도했다, 그러나 이것은 현재 내 코드 (단지 필요한 부분)입니다 ...

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

그리고 난 load_hovers("backgroundColor: 'red'");이 오류 invalid object initializer $(this).animate({를 반환

를 호출합니다. 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() { 
     }); 
    }); 
}