jquery - 使用 .stop() 或 .stop(true,true) 无法解决多次悬停火灾

Question

这里我有一个jQuery翻转效果的例子：http: //jsfiddle.net/JfUbW/112/

我认为的问题是因为我将前图像的宽度设为 0，所以当在图像的边缘时，当前图像从鼠标下方移出时，它会导致悬停一次又一次地触发只要鼠标当时正在移动，它就会无意中再次触发悬停在下图中。

我尝试使用 .stop() 和 .stop(true,true) 但这实际上似乎使问题变得更糟。

有任何想法吗？

$(window).load(function() {
image_width = $(".front").width();
margin = image_width / 2 + 'px';
image_width += 'px';

compress = {
    width: 0,
    marginLeft: margin,
    opacity: 0
};
decompress = {
    width: image_width,
    marginLeft: 0,
    opacity: 1
}

$(".back").css(compress); 
$('.front').parent().hover(function() {
        $('.front').delay(150).animate(compress, 100);
        $('.back').delay(150).animate(decompress, 100);
    }, 
    function() {
        $('.back').delay(150).animate(compress, 100);
        $('.front').delay(150).animate(decompress, 100);
    }

);

});

Answer 1

如果您想在悬停时翻转并“翻转”，您可以让.containerdiv 保持其大小。

添加以下 CSS：

.container{
    width: 180px;
    height:180px;
}

或在事件附加或执行时以编程方式设置其大小。

演示。