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

如果您想继续悬停并“翻转”，可以让.container div保持其大小。

添加以下CSS：

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

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

Demo

使用.stop（）或.stop（true，true）解决了多次悬停的火灾

1 个答案: