jquery – 是否可以使用Easing滑动切换div并设置最小高度？

我有一个div使用slidetoggle和easing进行折叠和扩展.

$('button').click(function () {
    $('div').slidetoggle('2000',"eaSEOutBounce");
});

当它向上滑动时,我希望它具有最小高度,以便始终有一个小的可见内容.

所以当它向下滑动时有高度:( div高度)和slideUp,高度：10px;

请注意,div可以有任何高度,这就是我不使用动画的原因.

解决方法

我能想到的最好的是以下内容：

var toggleMinHeight = 30,duration = 2000,easing = 'swing';
$('.toggles').each(
    function(){
        $(this).attr('data-height',$(this).height());
    }).click(
    function(){
        var curH = $(this).height();
        if ($(this).is(':animated')){
            return false;
        }
        else if (curH == $(this).attr('data-height')) {
            $(this).animate(
                {
                    'height' : toggleMinHeight
                },duration,easing);
        }
        else if (curH == toggleMinHeight){
            $(this).animate(
                {
                    'height' : $(this).attr('data-height')
                },easing);
        }
    });

JS Fiddle demo.

但是,这个演示有一些问题：

>没有基本jQuery库指定的缓动功能(允许访问’swing’和’linear’),但是这可以通过包含jQuery UI来改进.
>它几乎可以肯定地成为一个插件,看起来有点不那么狡猾.
>需要一个大的,功能强大但不漂亮的if / else if语句.
>至少需要每个()的一次传递来指定div元素的’default’/’natural’高度.
>如果div不是position：absolute,它们会缩小到内联元素的基线(因为它们显示为：inline-block),如果它们是float,则可能不是问题：left(或者float) ：对,很明显).

希望它有用,但它在当前状态下肯定不理想.

编辑发布上面的插件版本(它保留了与以前相同的所有问题)：

(function($) {

    $.fn.slideto = function(slidetoMin,easing) {

        var slidetoMin = slidetoMin || 30,duration = duration || 500,easing = easing || 'linear';
        $(this)
            .attr('data-height',$(this).height())
            .click(
                function() {
                    var curH = $(this).height();
                    if ($(this).is(':animated')) {
                        return false;
                    }
                    else if (curH == $(this).attr('data-height')) {
                        $(this).animate({
                            'height': slidetoMin 
                        },easing);
                    }
                    else if (curH == slidetoMin) {
                        $(this).animate({
                            'height': $(this).attr('data-height')
                        },easing);
                    }
                });

        return $(this);
    };
})(jQuery);

$('.toggles').slideto(50,1500,'swing');

JS Fiddle demo.

> slidetoMin：这可以是带引号的字符串,例如’3em’,’20px’,也可以是不带引号的数字,例如30,并表示要将元素滑动到的高度.如果没有提供单位,则默认情况下,高度被视为以像素为单位.
> duration：动画持续的毫秒数.
> easing：一个带引号的字符串,用于定义动画中要使用的缓动类型;没有jQuery UI,这可能是’线性’或’摇摆’.使用jQuery UI可能有其他选项,但这是未经测试的.如果未指定,则动画默认为“线性”.因为在带引号的字符串中使用单位会导致最后的else if返回false(显然,我想……叹息),请对此变量仅使用不带引号的数字参数(或编辑插件以正确处理带单位的带引号的字符串…).

在我发布之前我没有意识到的一个更大的问题是,插件版本只允许动画的一次迭代.我很困惑,尽管对其他人来说可能很明显？

好吧,它似乎是在if语句中对高度的评估.如果：curH == toggleMinHeight返回false,则使用3em导致最终的else.可能是由于该变量中存在单位(em).上述指南已经过编辑,以反映不应使用这些单位.

参考文献：

> animate().
> :animated selector.
> attr().
> click().
> each().
> height()
> is()