如何绑定/取消绑定点击以防止动画的队列混乱？

Question

这个不行。动画队列最终陷入混乱。我做错了什么？请帮忙。

$button.bind('click',showHideFavourites);

function showHideFavourites() {
    if ($favContent.css('opacity') == 1) { 
        hideFavourites(); 
    } else { 
        showFavourites(); 
    }
}

function hideFavourites() { 
    $button.unbind('click');

    $favContent.animate({'opacity':'0'},250,function() { 
        $favourites.animate({'height':0},{queue:false,duration:250,easing:'easeInOutQuad',complete:function() {
            $button.text(showFav);

            $button.bind('click',showFavourites);
        }});
    });
}

function showFavourites() {
    $button.unbind('click');

    $favourites.animate({'height':fl_openHeight},{queue:false,duration:250,easing:'easeInOutQuad',complete:function() {
        $favContent.animate({'opacity':'1'},250);
        $button.text(hideFav);

        $button.bind('click',hideFavourites);   
        });
    }});
}

Answer 1

$button.on('click', function() {
    $favContent.css('opacity') == 1) ? hideFavourites() : showFavourites(); 
});

function hideFavourites() { 
    $favContent.stop(true, true).animate({'opacity':'0'},250,function() { 
        $favourites.stop(true, true).animate({'height':0}, 250, 'easeInOutQuad', function() {
            $button.text(showFav);
        });
    });
}

function showFavourites() {
    $favourites.stop(true, true).animate({'height':fl_openHeight}, 250 'easeInOutQuad' function() {
        $button.text(hideFav);
        $favContent.stop(true, true).animate({'opacity':'1'},250);
     });
}

如果您尝试同时为高度和不透明度设置动画，您也应该放弃链接功能，我没有，因为我不确定 noqeue 的用途？