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

Answer 2

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

例如：

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

和

$("#element").on("click", function() {
    $(this).stop();
    ...animation code...
});

Answer 3

在我的情况下，小提琴正常工作，但我建议您在身高的情况下使用max-height，因此请使用max-height: 0和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");
}

Jquery Animate高度切换

3 个答案: