javascript - Jquery Animate 高度切换

Question

我正在使用 JQuery 来制作小部件效果，即最小化和最大化小部件。

但问题是，当我快速单击最小化按钮时，小部件崩溃了..

我认为问题在于它将动画中间高度作为切换时的新高度...

请帮忙...

$(document).ready(function () {
        $('.widget-minimize').click(function () {
            toggleMinimize($(this).parents('.widget').attr('id'));
        });

        $('.widget-close').click(function () {
            closeWidget($(this).parents('.widget').attr('id'));
        });
    });

    function toggleMinimize(widgetId) {
        var $content = $('#' + widgetId + ' .widget-content');
        if ($content.height()) {
            $content.data('oldheight', $content.height());
            $content.animate({height: 0});
            $('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-maximize.png').attr('alt', 'maximize');
        }
        else {
            $content.animate({height: $content.data('oldheight')});
            $('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-minimize.png').attr('alt', 'minimize');
        }
    }

    function closeWidget(widgetId) {
         $('#' + widgetId).animate({ "opacity": 0, "height": 0 }, 200, "swing");
    } 

Click here to see jsFiddle

Answer 1

如果您的内容当前正在动画化，只需从您的toggleMinimize函数返回，如下所示:

function toggleMinimize(widgetId) {
   var $content = $('#' + widgetId + ' .widget-content');
   if ($content.is(':animated')) {
       return;
   }

参见working fiddle