Question

我正在使用CSS transition以及此JSFiddle中的jQuery animate()。

然而，当我将两者合并时，首先发生CSS，然后jQuery动画发生，偶尔会暂停。

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

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

＆＃13;

/* 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);
    }
);

＆＃13;

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;
}

＆＃13;

<!-- 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>

＆＃13;

（在代码段中有点难以理解，但它可以给你一个想法，特别是如果你把它设置为整页。但它在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转换在同一事件

1 个答案: