2011-08-07 3 views
1

내 문제는 여기에 있습니다. JQuery를 사용하여 사이트의 배경 이미지 그라디언트를 실시간으로 업데이트하고 싶지만 동일한 속성에 대해 여러 폴백을 업데이트하는 방법을 찾을 수 없습니다. 물론 크로스 브라우저 지원을 위해서는 여러 가지 대체 기능이 필요합니다. 다음 내 JQuery와JQuery를 사용하여 여러 fallback 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)'); 
... 

,이 방법을 사용하여 예상대로 같은 배경 이미지 속성은 덮어 쓰기되고있다.

어떻게 여러 폴백 속성을 동적으로 업데이트 할 수 있습니까? 가능한가?

업데이트 : 알고리즘을 사용하여 그래디언트 천이를 생성한다는 사실을 잊고 동적으로 업데이트 할 수있는 값이 수백 개 있습니다.

답변

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

업데이트주세요 하지만 지금은 두 개의 다른 클래스를 사용하고 두 클래스를 토글하는 것에 반대합니까?

+0

그라디언트 사이에 전환이 동적으로 생성되므로 수백 개의 값이 있습니다 ... attr()을 직접 설정하면 직접 작동합니다 ... – JimDaniel