анимировать CSS3 градиентные позиции с помощью jQuery

Question

Можно ли анимировать положение CSS3-градиентного цвета с помощью jQuery?

Я бы хотел оживить из этого

background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 0%, #FFFFFF 0%,
   #FFFFFF 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(0%,#FF0000),
    color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF)); /* webkit */

к этому

background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 50%, #FFFFFF 50%,
    #FFFFFF 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000),
    color-stop(50%,#FF0000), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); /* webkit */

в хх миллисекундах

Заранее спасибо!

Answer 1

Будьте креативны .. Это пример того, как я делаю градиентные переходы без дополнительных плагинов ..

Я использую 2 одинаковых div с разными градиентами, расположенными один над другим.Затем я использую jquery для анимации непрозрачности сверху.

Вот это шаг за шагом

1. создайте оболочку с фиксированным размером, скажем, "width: 200px"и "height: 100px" (я использую обертку, чтобы было легче отрегулировать положение div внутри нее)
2. создайте 2 div, которые имеют тот же размер, что и обертка, дают оба разных градиента фона, но используютодин и тот же контент для обоих, так что визуально меняется только фоновый градиент.
3. добавить "позиция: относительная;"и отрегулируйте положение div, который будет сверху, в этом случае box2 с "bottom: 100px;"(обратите внимание на то же значение, что и высота обертки и элементов div. Это позволяет элементу div, который будет на вершине, перемещаться вверх на 100 пикселей, располагаясь прямо над нижним элементом div, относительно обертки ... это невозможно без использования«position: относительный;» в верхнем div)
4. анимировать непрозрачность div с вашим предпочтительным методом, в этом примере я использую fadeToggle

HTML -----

<a href="#">Click to change gradient</a><br>
<div align="center" style="width:200px; height:100px;">
     <div style="width:200px; height:100px;" class="box1" id="box1">CONTENT BOTTOM DIV</div>
     <div style="width:200px; height:100px; position:relative;" class="box2" id="box2">CONTENT TOP DIV</div>
</div>

ГРАДИЕНТЫ В CSS -----

.box1 {
background: rgb(237,144,23); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(237,144,23,1) 0%, rgba(246,230,180,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,144,23,1)), color-stop(100%,rgba(246,230,180,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed9017', endColorstr='#f6e6b4',GradientType=0 ); /* IE6-9 */
}
.box2 {
background: rgb(246,230,180); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,230,180,1)), color-stop(100%,rgba(237,144,23,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}

jQuery анимация ----

$(document).ready(function(){ 
    $("a").click(function(){
            $("#box2").fadeToggle(100, "linear");   
    });
});  

вы можете наложить третий div, так что вам не нужночтобы написать одно и то же содержимое дважды, добавив вторую обертку снаружи первой и поместив третий div после закрытия внутренней обертки ..

, чтобы просмотреть это, перейдите по следующей ссылке ..

Ссылка на пример

Answer 2

Вы можете сделать градиент в два раза больше (то есть включить первый градиент в первые 50%, а второй градиент в последние 50%), как это необходимо, и использовать этот код:

-webkit-background-size: 200%;
-moz-background-size: 200%;
-o-background-size: 200%;
-ms-background-size: 200%;
background-size: 200%;

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

background-position:bottom;

При наведении

Answer 3

Это фрагмент кода одного из моих проектов, в котором я использую градиентный переход с помощью jquery. Это может помочь вам:

<div id="gr_anim"> Change Gradient </div>

var p1 = t = 0;
var p2 = 100;
function hello() {
p1 = p1 + 5;
p2 = 100 - p1;
if(p1 <= 100 && p2 >= 0) {
    $('#gr_anim').css({
        'background-image':'-moz-linear-gradient('+ p1 +'% '+ p2 +'% 45deg, #000, #fff)'
    });
} else {
    clearTimeout(t);
}
t = setTimeout('hello()',1000);}
$( function() {
hello();});

Answer 4

CSS градиентные переходы еще не были реализованы ни в одном из браузеров, хотя и в спецификации.Итак, вы не можете сделать это.Вам нужно сделать это с SVG (если вы смелый).

Answer 5

Как насчет анимации ширины контейнера, к которому применяется градиент?

(пример для Chrome с JQuery)

html:

<div id='test'>
</div>

<span id='click_me'>
</span>

css:

 #test 
 { 
      width:400px; height: 400px; float:left;           
      background: linear-gradient(90deg, #5e5e5e 0%, #000 100%);
 }

js:

$('#click_me').on('click',function () 
   { 
      $('#test').animate({'width':'+=400'},400); 
   } 
);

работает угощение

РЕДАКТИРОВАТЬ: Я сделал ошибку здесь в отношении исходного вопроса.Я собираюсь оставить здесь ответ, так как считаю, что при использовании большего количества элементов, чем один, положение затухания можно перемещать с помощью функции animate () внутри контейнера div, создавая эффект скольжения позиции затухания

Answer 6

Я думаю, вы должны попробовать это с помощью switchqulass класса jquery ui, вам нужно добавить JqueryUI и ссылку на ядро ​​эффектов зависимости http://jqueryui.com/demos/switchClass/

примерно так:

<script type="text/javascript">
    $(function() {
        $("#button").click(function () {
            $(".divPropertyStart").switchClass("divPropertyStart", "divProperty", 1000);
            $(".divProperty").switchClass("divProperty", "divPropertyStart", 1000);
            return false;
        });
    });
</script>

<style type="text/css">
    .divPropertyStart { background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 0%, #FFFFFF 0%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(0%,#FF0000),    color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF)); }

    .divProperty { background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 50%, #FFFFFF 50%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(50%,#FF0000), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); }
</style>

<div class="divPropertyStart"></div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>

Это работает для меня @ localhost

Lauw