Question

演示：http://jsfiddle.net/31cn9hno/

$(document).ready(function () {
    $('.hoverExpand').mouseenter(function () {
        $(this).find('.productsThumbWrap').stop(true, true).animate({
            "margin-top": "+=108px"
        }, "normal");
        $(this).find('.productsThumbWrap img').stop(true, true).css({
            opacity: 1,
            'transition': 'opacity 0.3s ease 0.35s'
        });
    });
    $('.box').mouseleave(function () {
        $(this).find('.productsThumbWrap').stop(true, true).css({
            'margin-top': '92px'
        });
        $(this).find('.productsThumbWrap img').stop(true, true).css({
            opacity: 0,
            'transition': 'none'
        });
    });
});

这正是我想要的，但有一个问题。尝试从.hoverExpand鼠标进入按钮并向上移动到.hoverExpand，鼠标中心重新触发。如何防止？

Answer 1

您只需要添加一个类来指示当前项目正在悬停。在这种情况下，我添加了一个on类并在执行鼠标输入代码之前检查类。在鼠标离开处理程序中，您只需要删除on类。

http://jsfiddle.net/31cn9hno/3/

$(document).ready(function () {
    $('.hoverExpand').mouseenter(function () {
        var $this = $(this);
        if (!$this.hasClass('on')) {
            $this.addClass('on')
            $this.find('.productsThumbWrap').stop(true, true).animate({
                "margin-top": "+=108px"
            }, "normal");
            $this.find('.productsThumbWrap img').stop(true, true).css({
                opacity: 1,
                    'transition': 'opacity 0.3s ease 0.35s'
            });
        }
    });
    $('.box').mouseleave(function () {
        var $this = $(this);
        $this.find('.hoverExpand').removeClass('on');
        $this.find('.productsThumbWrap').stop(true, true).css({
            'margin-top': '92px'
        });
        $this.find('.productsThumbWrap img').stop(true, true).css({
            opacity: 0,
                'transition': 'none'
        });
    });
});

如何解决mouseenter和mouseleave重叠困境？

1 个答案: