jQuery animate（）和CSS转换分别发生在同一事件上

在这篇文章中，我正在使用CSS

transition

以及jQuery

animate（）

然而，当我将两者结合在一起时，CSS首先发生，然后jQuery动画发生，有时会暂停

这两个动画都绑定到

（CSS:

:hover

，jQuery:

.hover（）

）的悬停事件，但它们不会同时发生

---

如果您需要，以下是所有代码：

/*不要介意第一节。。。只是为了定心*/
var div=$（“div#fiddle”）；
var win=$（窗口）；
var reset=函数（）{
var wWidth=win.width（）；
var wHeight=win.height（）；
var dWidth=div.width（）；
var dHeight=分区高度（）；
div.css({
marginTop:wHeight/2-dHeight/2，
边缘左侧：wWidth/2-dWidth/2
});
}
重置（）；
赢。调整大小（重置）；
/*这一部分是有问题的*/
悬停(
函数（）{
$（此）。设置动画({
marginTop:“-=50”，
边缘左侧：“-=50”
}, 2000);
},
函数（）{
$（此）。设置动画({
marginTop:“+=50”，
边缘左侧：“+=50”
}, 2000);
}
);
html，正文{
背景色：#4444；
填充：0；
保证金：0；
}
提琴{
宽度：200px；
高度：200px；
框大小：边框框；
背景色：#8888dd；
边界半径：100px；
-webkit转换：所有2；
-o-过渡：所有2s；
-moz转换：所有2s；
-ms转换：全部2秒；
过渡：所有2；
}
提琴：悬停{
高度：300px；
宽度：300px；
边界半径：150px；
}
好吧，老实说，我是在修修补补。从jquery中的动画中删除持续时间（2000）。看起来css上的转换处理持续时间

div.hover(
    function() {
        $(this).animate({
            marginTop: "-=50",
            marginLeft: "-=50"
        });
    },
    function() {
        $(this).animate({
            marginTop: "+=50",
            marginLeft: "+=50"
        });
    }
);

是否要求同时应用
转换
和
动画（）
？@guest271314这对我来说只是一个简单的项目，所以没有要求。但是，是的，就是这个主意。酷！它起作用了！我想提高投票率，但我已经达到了每天的上限。要等到明天…我不确定它是否只是在我的手机上运行得有点慢，但我喜欢它的浮动效果；泡沫状的。几乎让人着迷（也许已经过了我的就寝时间？）。这是一个更大的项目吗？我想看看它是否能实现。唯一的问题是它看起来像是在奇怪地移动（你所描述的气泡状效果。CSS和JS动画功能似乎不同。你知道两者的默认过渡功能是什么吗？如果我将它们设置为相同的，那么应该更直接。并且@DarrenGourley不，不是。如果你想将其提升到另一个级别，请继续吧！我只是在玩而已。）在附近。是的，已经过了就寝时间。去睡觉=）抱歉，我真的只是在修补。我注意到在js动画之前有一个延迟，似乎是2秒，所以我把它增加到6秒，这增加了延迟。这导致我将它设置为0，然后完全删除它。嘿，奇怪的动作会困扰你，这是我最喜欢的部分，我觉得很自然，我猜是这样的为什么我喜欢它。不幸的是，我不知道所有的细节转换，虽然，对不起。