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

Question

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

然而，当我将两者结合在一起时，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/