从jquery调用css3转换

Question

CSS3过渡非常棒!到目前为止,我正在触发它们:hover或:样式表中的主动声明.我正在寻找是否有办法从jquery触发它们.

例如:

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

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

:鼠标移动到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");
});