Question

我有一个div，它使用slideToggle和easing进行折叠和扩展。

$('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

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

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

好的，它似乎是3em声明中对高度的评估。使用else if导致最终curH == toggleMinHeight：em返回false。可能是由于该变量中存在单位（{{1}}）。上述指南已经过编辑，以反映单位不的使用。

参考文献：

Answer 2

不是真的。调用slide方法时，它将获取样式属性

display: none;

但是，您可以使用回调函数

动态修复它

$('div').slideToggle('2000', "easeOutBounce", function() {
     $('div')[0].style.height="//whatever//"     //You could also use the min-height property
     $('div')[0].style.display="inline";
);

动画究竟出现了什么问题？

Answer 3

我建议你玩它很棘手;

为什么你没有滑动div上方的div，它具有相同的宽度和颜色，因此它总是显示并显示为滑动部分的一部分

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

3 个答案: