Question

我愚弄jquery悬停功能。当前的代码片段如下所示：

$leftColumn.children().first().hover(
    function(event) {
        var $this = jQuery(this);
        $this.css({
            'background-color': '#505050'
        }).parent().stop()
        .animate(
            {
                'z-index': '999',
                width: '220px'
            },
            {
                duration: '1000'
            }
        );
    },
    function(event) {
        var $this = jQuery(this);
        $this.parent().stop()
        .animate(
            {
                width: '38px',
                'z-index': '1'
            },
            {
                duration: '1500',
                complete: function() {
                    $this.css({
                        'background-color': 'transparent'
                    });
                }
            }
        );
    }
);

这基本上做的是增加div的宽度（绝对位置）以覆盖另一个div。

我选择使用jQuerys animate()功能而不是CSS3s转换，因为我想在完成关闭（再次减小宽度）动画时触发回调。

我现在的问题是，我希望将关闭动画延迟2秒（是的，我知道delay() vs setTimeout()讨论）与setTimeout()一起工作正常。但是，由于动画在给定的持续时间内超时，它将运行，即使我再次进入可恢复区域。这当然是有意义的，因为stop()只有动画在旅途中的触发器，如果它超时则不是这种情况。

如何让这个东西工作（重新进入可停止区域时停止关闭动画）并且在减少宽度之前仍然保持超时/延迟＆＃34; hover leave＆＃34;？

jQuery：在触发之前停止延迟的动画

0 个答案: