Применение градиентов css3 с помощью jQuery

Question

В конце концов, я хочу динамически изменять градиенты на основе разных вещей, но как мне получить jquery для применения градиента css3?

 //works
 $(element).css("background-image", "url(http://www.google.co.uk/images/logos/ps_logo2.png)");  

 //doesn't work
 $(element).css("background-image","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");

 //doesn't work
 $(element).css("background-image","-moz-linear-gradient(left center,rgb(194,231,255) 28%,rgb(255,255,255) 28%");

Чего мне не хватает?Я также пытался

 $(element).css({background: "-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255)"});

Эти подходы не действительны?

Answer 1

Ваш второй подход выглядит хорошо ... Может быть, вам нужно использовать стили CSS для браузеров, не относящихся к webkit ... Кросс-браузерный CSS-градиент

У меня работает в Chrome

$('#block').css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))" 
});

Также взгляните на: http://www.colorzilla.com/gradient-editor/

Answer 2

Другой вариант - использовать метод addClass jQuery. Это позволяет динамически добавлять и удалять классы и, следовательно, любое форматирование, связанное с этим классом, включая градиенты.

Answer 3

Я использую дефисный синтаксис в формате JSON (я всегда использую формат JSON для согласованности). И он отлично работает как в Chrome, так и в Firefox.

Например:

$("#googleFeed div:even").css({
    'background':'-webkit-linear-gradient(top,white,black)',        
});

Answer 4

Вот небольшой пример ...

$("p").css({background:'linear-gradient(red,blue,red)'});

Answer 5

При использовании .css () в jquery, я считаю, что вы должны использовать сокращенные версии атрибутов.Например, margin-left будет marginLeft

$(element).css("backgroundImage","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");