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>

（在sn-p中有点难看，但它可以给你一个想法，特别是如果你将它设置为整页。但最好在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/