jQuery animate() 和 CSS 过渡在同一事件上分别发生

Question

我在 CSS transition 和 jQuery animate() 一起玩这个 JSFiddle。

但是，当我将两者结合使用时，CSS 先发生，然后 jQuery 动画发生，偶尔会有停顿。

这两个动画都绑定到 <div> 的悬停事件（CSS：:hover，jQuery：.hover()），但是它们不要同时发生。

如果您需要，这里是所有代码：

/* DON'T MIND THIS FIRST SECTION ... JUST FOR CENTERING */
var div = $("div#fiddle");
var win = $(window);

var reset = function() {
    var wWidth = win.width();
    var wHeight = win.height();
    
    var dWidth = div.width();
    var dHeight = div.height();
    
    div.css({
        marginTop: wHeight / 2 - dHeight / 2,
        marginLeft: wWidth / 2 - dWidth / 2
    });
}

reset();

win.resize(reset);

/* THIS SECTION IS THE PROBLEMATIC ONE */
div.hover(
 function() {
     $(this).animate({
         marginTop: "-=50",
            marginLeft: "-=50"
        }, 2000);
    },
    function() {
     $(this).animate({
            marginTop: "+=50",
            marginLeft: "+=50"
        }, 2000);
    }
);

html, body {
    background-color: #444444;
    padding: 0;
    margin: 0;
}

div#fiddle {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    background-color: #8888dd;
    border-radius: 100px;
    
    -webkit-transition: all 2s;
    -o-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
}

div#fiddle:hover {
    height: 300px;
    width: 300px;
    border-radius: 150px;
}

<!-- The HTML if you want it  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fiddle"></div>

（在代码片段中有点难看，但它可以给你一个想法，特别是如果你将它设置为整页。但最好在 JSFiddle.net 上）

知道为什么会这样吗，有什么解决办法吗？另外，有没有想过为什么两个事件之间有时会有停顿，有时却没有？谢谢。

Answer 1

好吧，老实说，我是在修修补补。从 jquery 中的动画中删除持续时间 (2000)。看起来 css 上的过渡处理持续时间。

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

http://jsfiddle.net/sp2ufh4o/1/

jQuery animate() 和 CSS 过渡在同一事件上分别发生

jQuery animate() and CSS transition happening separately on same event

css

jquery

animation

css-transitions

jquery-animate