2

我正在使用 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");
    }

点击这里查看 jsFiddle

4

3 回答 3

3

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

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

见工作小提琴

于 2013-04-14T13:42:28.213 回答
0

看看 jQuery 的.stop()方法和它的:animated选择器。我经常在这种情况下使用它们来帮助我处理已经运行的动画。

例如：

$("#element").on("click", function() {
    if ($(this).not(":animated")) {
        ...animation code...
    }
});

和

$("#element").on("click", function() {
    $(this).stop();
    ...animation code...
});
于 2013-04-14T13:42:09.180 回答
0

在我的情况下，小提琴工作正常，但我建议你max-height在高度的情况下使用，所以使用max-height: 0and max-height: 80（假设 80 比最大高度多一点）。您也可以传递元素而不仅仅是 ID。

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

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

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

function closeWidget(widgetId) {
     $('#' + widgetId).animate({ "opacity": 0, "max-height": 0 }, 200, "swing");
}
于 2013-04-14T13:42:21.563 回答