从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动画函数不支持颜色转换，虽然我知道你可以添加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 plugin，这使得使用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;
}