从 jquery 调用 css3 转换答案

【问题标题】：calling a css3 transition from jquery从 jquery 调用 css3 转换
【发布时间】：2011-10-27 17:15:08
【问题描述】：

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 转换。

【问题讨论】：

标签： 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");
});

【讨论】：

好的，我修复了你的示例并让它工作：你需要从#MyDiv 中删除边框和背景定义并将它们放在另一个名为Regular 的类中，这样你就有了
在这里查看修复：jsfiddle.net/v7AA7/11
原因是 id 选择器的权重比简单的类选择器要重，因此，将 .hover 更改为 #MyDiv.hover 即可。 jsfiddle.net/v7AA7/191

【解决方案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'});
});

【讨论】：

【解决方案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;
}

【讨论】：

不，我的意思是当我悬停在 SomeOtherDiv 上时，我想触发 MyDiv 上的转换。

【解决方案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");
});

修正了 Scott 的答案。他没有工作，因为#MyDiv 样式覆盖了 .hover 样式，因为它更具体。我将 .hover 样式更改为包含 id，然后允许它覆盖 #MyDiv 样式。

【讨论】：