Объявление градиента CSS3 с помощью jQuery

Я добавляю градиент css3 к кнопке. Я думаю, что jQuery объединяет все мои кросс-браузерные объявления «background-image» как только одно объявление (последнее «фоновое изображение», которое оно находит). Есть ли лучший способ написать jQuery, чтобы он представлял браузеру все кросс-браузерные CSS, как обычно?Объявление градиента CSS3 с помощью jQuery

Вот мой JQuery:

 $('.button').css({ 
     'background-color' : FromGradientColor , 
     'background-image' : '-webkit-gradient(linear, 0% 0%, 0% 100%, from('+ FromGradientColor +'), to('+ ToGradientColor +'))' , 
     'background-image' : '-webkit-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' , 
     'background-image' : '-moz-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' , 
     'background-image' : '-ms-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' , 
     'background-image' : '-o-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' 
    });

Это то, что я хочу JQuery представить браузер (за исключением цветов, которые определяются моими переменными в JQuery):

background-color: #ddd; 
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc)); 
background-image: -webkit-linear-gradient(top, #eee, #ccc); 
background-image: -moz-linear-gradient(top, #eee, #ccc); 
background-image: -ms-linear-gradient(top, #eee, #ccc); 
background-image: -o-linear-gradient(top, #eee, #ccc); 
background-image: linear-gradient(top, #eee, #ccc); 
text-shadow: 0 1px 0 rgba(255,255,255,.8);

источник

2012-06-15 infatti

Точная копия [(? как насчет дублированных ключей) Построить JavaScript Object для использования с JQuery .css()] (http://stackoverflow.com/questions/8457388/build-javascript -объект в использовании-с-Jquery-CSS-что-о-дублированных ключей). Если стили не применяются динамически, я рекомендую использовать препроцессор CSS, например [LESS] (http://lesscss.org) или [SASS] (http://sass-lang.org/). –

Согласитесь с Робом ... Однако вы действительно хотите сделать это таким образом, вы должны быть в состоянии определить, какой механизм рендеринга вы используете JS, а затем примените только одно из свойств градиента ... – prodigitalson

Я знаком с Less, но никогда использовал его с jquery. Можно ли использовать Less внутри jQuery? – infatti

Помещенный стили в классе, такие как этот less например:

@bgcolor: #ddd; 

.gradient(@from: #eee, @to: #ccc) 
    { 
    background-color: @bgcolor; 
    background-image: -webkit-linear-gradient(top, @from, @to); 
    background-image: -moz-linear-gradient(top, @from, @to); 
    background-image: -ms-linear-gradient(top, @from, @to); 
    background-image: -o-linear-gradient(top, @from, @to); 
    filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, [email protected]{from}, [email protected]{to})"; 
    -ms-filter: "'progid:DXImageTransform.Microsoft.gradient (GradientType=0, [email protected]{from}, [email protected]{to})'"; 
    }

Тогда Ссылки на сайты е как таковой:

$('.button').addClass("gradient")

источник

2013-02-27 22:11:36

Объявление градиента CSS3 с помощью jQuery

ответ

Смежные вопросы