jquery - 从 jquery 调用 css3 转换

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;
}

当鼠标移到 MyDiv 上时，将触发 :hover 过渡，但我想要做的是:

$('#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");
});