вызывая переход css3 из jquery

Question

CSS3 переходы великолепны! Пока что я запускаю их с помощью: hover или: active объявлений в таблице стилей. Я смотрю, есть ли способ вызвать их из jquery.

Например:

#MyDiv{
border:1px solid red;
background:blue;
transition: all 0.3s linear;
}

MyDiv:hover{
border:1px solid black;
background:yellow;
}

Переход: hover будет срабатывать, когда мышь перемещается над MyDiv, но я собираюсь сделать что-то вроде:

$('#MyDiv').transition(hover); //that would be ideal

Другими словами, я бы хотел запустить анимацию css, чтобы при наведении курсора мыши на другой элемент div анимация #MyDiv запускалась с $('#SomeOtherDiv').mouseenter(function () { $('#MyDiv').transition(hover); });

Функция jquery animate не поддерживает цветовые переходы, и хотя я знаю, что вы можете добавить плагины jqueryUI, чтобы заставить его работать, мне было интересно, есть ли способ заставить его работать без использования jquery для вызова перехода css.

Answer 1

#MyDiv {
    border:1px solid red;
    background:blue;
    transition: all 2.0s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.hover{
    border:1px solid black;
    background:yellow;
    transition: all 2.0s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

$("#MyOtherDiv")
.mouseenter(function(){
    $("#MyDiv").addClass("hover");
})
.mouseleave(function(){
    $("#MyDiv").removeClass("hover");
});

Answer 2

Для повышения производительности мобильных устройств я бы использовал webkit-transform , а не webkit-transition, поскольку вы получите преимущества аппаратного ускорения от мобильного устройства, что обеспечит более плавный, естественный вид, когда выполняя эти переходы используя CSS3.

На самом деле, я бы пошел и получил плагин jQuery Transit , который облегчает использование jQuery для вызова данного перехода. Он в основном заботится о переходах CSS3 и обеспечивает кросс-браузерную совместимость.

JS Fiddle Demo

Javascript:

$("#startTransition").on("click", function()
{
    $("#MyDiv").transition({ background: 'yellow', color: 'black'});
});

Answer 3

Для этой цели вам не нужен jQuery.http://jsfiddle.net/v7AA7/ - пример

#MyDiv{
    border:1px solid red;
    background:blue;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

#MyDiv:hover{
    border:1px solid black;
    background:yellow;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

Answer 4

#MyDiv {
    border:1px solid red;
    background:blue;
    transition: all 2.0s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

#MyDiv.hover{
    border:1px solid black;
    background:yellow;
    transition: all 2.0s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

$("#MyOtherDiv")
.mouseenter(function(){
    $("#MyDiv").addClass("hover");
})
.mouseleave(function(){
    $("#MyDiv").removeClass("hover");
});

Исправлен ответ Скотта. Он не работал, потому что стили #MyDiv переопределяли стили .hover, потому что они более специфичны. Я изменил стиль .hover, чтобы включить идентификатор, который затем позволяет ему переопределить стиль #MyDiv.