Question

我有一些DIV的产品，我有：

// mouseenter
$(document).on('mouseenter', '.productWrapper', function(){
    $(this).stop(true,true);
    $(this).find('.productWrapperContentVisible').animate({
        height: '100px',
        opacity: '1',   
    }, function(){
        $(this).find('.productWrapperPrice').fadeIn();  
        $(this).find('.productWrapperByCompany').fadeIn();
    }); 
});

// mouseleave
$(document).on('mouseleave', '.productWrapper', function(){
    $(this).stop(true,true);
    $(this).find('.productWrapperPrice').fadeOut('fast');
    $(this).find('.productWrapperByCompany').fadeOut('fast');
    $(this).find('.productWrapperContentVisible').animate({
        height: '40px',
        opacity: '.8',      
    });
});

每个页面中大约有20个产品，而我正在使用stop（true，true），在我多次移动鼠标之后，这不起作用，它们会继续改变高度，有时productWrapperPrice仍然存在，而我没有鼠标在那里，它应该隐藏..。

sample: http://jsfiddle.net/gwsPB/

我的代码出了什么问题？感谢

Answer 1

您需要对正在设置动画的元素调用stop()，在祖先元素上调用它无效。

// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
    $(this).find('.productWrapperContentVisible').stop(true, true).animate({
        height: '100px',
        opacity: '1'
    }, function () {
        $(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
    });
}).on('mouseleave', '.productWrapper', function () {
    var $this = $(this);
    $this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
    $this.find('.productWrapperContentVisible').stop(true, true).animate({
        height: '40px',
        opacity: '.8'
    });
});

Answer 2

试试这个：

// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
    $(this).find('.productWrapperContentVisible').stop(true, false).animate({
        height: '100px',
        opacity: '1'
    }, function () {
        $(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
    });
}).on('mouseleave', '.productWrapper', function () {
    var $this = $(this);
    $this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
    $this.find('.productWrapperContentVisible').stop(true, false).animate({
        height: '40px',
        opacity: '.8'
    });
});

DEMO

问题是：当你立即快速鼠标输入和鼠标移动时，鼠标中心事件 中的animate功能尚未完成 。当您调用$this.find('.productWrapperContentVisible').stop(true, true)时，动画停止但调用回调函数再次显示它们

function () {
   $(this).find('.productWrapperPrice, .productWrapperByCompany')
          .stop(true, true).fadeIn();
}

使用stop(true, false)，不会调用回调。

jquery stop（）无法正常工作

2 个答案: