- PVSM.RU - https://www.pvsm.ru -

Градиент на jQuery

Путем экспериментов была найдена реализация градиента, которой и поделюсь.

function show_gradient(selector,start_color,end_color){
$('body').find(selector)
.css('background-image', '-webkit-linear-gradient('+start_color+', '+end_color+')')
.css('background-image', '-moz-linear-gradient('+start_color+', '+end_color+')')
.css('background-image', '-o-linear-gradient('+start_color+', '+end_color+')')
.css('background-image', '-ms-linear-gradient('+start_color+', '+end_color+')')
.css('filter', 'progid:DXImageTransform.Microsoft.gradient(startColorstr='+start_color+',endColorstr='+end_color+',GradientType=0)')
.css('background-image', 'linear-gradient('+start_color+', '+end_color+')');

Возможно, похожую функцию уже кто-нибудь писал (далек от мысли, что никто этим не заморачивался), но не нашел рабочую/кроссбраузерную. Так что прошу не пинать, если подобное где-то видели.

Использовать её просто, пример:

<div id="gradient" style="position:relative;width:300px;height:150px;">
</div>
<button onclick="show_gradient('#gradient','#6E146B','#B495B5');$(this).html('Градиент блока поменялся!');">
Поменять градиент
</button>

Проверял работу на IE7, IE9, а также Chrome, FF, Opera последних версий.
Особенно трудно почему-то было «допереть», почему с ....css('background', 'linear-gradient('#6E146B','#B495B5')') не везде срабатывает; писать надо именно 'background-image'
Надеюсь будет кому-нибудь полезно, ещё больше надеюсь на полезные замечания по расширению функционала.

Автор: Den1xxx

Источник [1]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/25790

Ссылки в тексте:

[1] Источник: http://habrahabr.ru/post/167229/