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

Переходы CSS3 великолепны! До сих пор я запускаю их с помощью: hover или: активных объявлений в таблице стилей. Я хочу посмотреть, есть ли способ запустить их из 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 не поддерживает цветовые переходы, и, хотя я знаю, что вы можете добавлять плагины jqueryUI, чтобы заставить ее работать, мне было интересно, есть ли способ заставить ее работать без нее, используя jquery для вызова перехода css.

Ответы

Ответ 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");
});

Ответ 2

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

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

JS Fiddle Demo

JavaScript:

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

Ответ 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;
}

Ответ 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, чтобы включить id, который затем позволяет переопределить стиль #MyDiv.