jquery - 是否可以使用 Easing slideToggle 一个 div 并设置一个最小高度？

Question

我有一个 div，它使用 slideToggle 和缓动来折叠和展开。

$('button').click(function () {
    $('div').slideToggle('2000', "easeOutBounce");
});

我希望它在向上滑动时具有最小高度，以便它始终有一小部分可见内容。

所以当它向下滑动时有 height:(div height) 而在 slideUp, height:10px;

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

Answer 1

我能想到的最好的是:

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')
                }, duration, easing);
        }
    });

JS Fiddle demo .

但是这个演示有一些问题:

• 没有超出基本 jQuery 库指定的缓动功能(允许访问“swing”和“linear”)，但是可以通过包含 jQuery UI 来改进。
• 几乎可以肯定它可以做成一个插件，看起来不那么恶心。
• 需要大而实用但不漂亮，if/else if声明。
• 至少需要一次通过 each()分配 div 元素的“默认”/“自然”高度。
• 如果div这不是 position: absolute它们缩小到行内元素的基线(因为它们是 display: inline-block )，如果它们是 float: left 这可能不是问题(或 float: right，显然)。

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

---

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

(function($) {

    $.fn.slideTo = function(slideToMin, duration, 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 
                        }, duration, easing);
                    }
                    else if (curH == slideToMin) {
                        $(this).animate({
                            'height': $(this).attr('data-height')
                        }, duration, easing);
                    }
                });

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

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

JS Fiddle demo .

1. slideToMin:这可以是一个带引号的字符串，例如“3em”、“20px”，也可以是一个不带引号的数字，例如30。 , 代表你希望元素滑动到的高度。如果未提供单位，则默认情况下高度被视为以像素为单位。
2. duration:动画持续的毫秒数。
3. easing:一个带引号的字符串，定义要在动画中使用的缓动类型；如果没有 jQuery UI，这要么是“线性”，要么是“摆动”。 与 jQuery UI 其他选项可能是可能的，但这是未经测试的。如果未指定，则动画默认为“线性”。 因为在带引号的字符串中使用单位会导致最终的 else if要返回 false(显然，我想……唉)，请为此变量仅使用一个未加引号的数字参数(或编辑插件以正确处理带单位的带引号的字符串……)。

一个更大的问题，直到我发布这个我才意识到，插件版本只允许 一次 动画迭代。我对此感到困惑，尽管这对其他人来说可能是显而易见的？

好吧，看来是if里面的高度评价了陈述。使用 3em导致最终else if : curH == toggleMinHeight返回假。大概是由于该变量中存在单位( em )。上述指南经过编辑，以反射(reflect)不应使用这些单位。

---

引用资料:

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