Jquery动画高度切换

Jquery Animate height toggle

本文关键字：高度 动画 Jquery      更新时间：2023-09-26

我正在使用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

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

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

参见working fiddle

在我的情况下，小提琴工作正常，但我建议你在高度的情况下使用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的.stop()方法和它的:animated选择器。我经常在这种情况下使用它们来帮助我处理已经在运行的动画。

例如:

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

和

$("#element").on("click", function() {
    $(this).stop();
    ...animation code...
});
相关文章：