是否可以使用Easing滑动切换div并设置最小高度？
我有一个div使用slideToggle和easing进行折叠和扩展。
$('button').click(function () { $('div').slideToggle('2000', "easeOutBounce"); }); 当它向上滑动时，我想要它具有最小高度，以便总是有一个小的可见内容。
所以当它向下滑动时有height:(div height)和slideUp, height: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') }, duration, easing); } });
JS小提琴演示 。
但是，这个演示有一些问题：
- 没有基本jQuery库指定的缓动function（允许访问’swing’和’linear’），但是这可以通过包含jQuery UI来改进。
- 它几乎可以肯定地被制作成插件，看起来有点不那么狡猾。
- 需要一个大的，function性但不漂亮的
if/else if语句。 - 需要至少一次
each()传递以分配div元素的’default’/’natural’高度。 - 如果
div不是position: absolute它们会缩小到display: inline-block元素的基线（因为它们display: inline-block），如果它们是float: left，则可能不是问题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小提琴演示 。
- slideToMin：这可以是带引号的字符串，例如’3em’，’20px’，也可以是不带引号的数字，例如
30，并表示要将元素滑动到的高度。 如果没有提供单位，则默认情况下，高度被视为以像素为单位。 - duration：动画持续的毫秒数。
- easing：
一个带引号的字符串，用于定义动画中要使用的缓动类型;没有jQuery UI，这可以是“线性”或“摇摆”。使用 jQuery UI可能有其他选项，但这是未经测试的。如果未指定，则动画默认为“线性”。因为在带引号的字符串中使用单位会导致最后的else if返回false（显然，我猜…叹息），请对此变量仅使用不带引号的数字参数（或编辑插件以正确处理带单位的带引号的字符串…）。
在我发布之前我没有意识到的一个更大的问题是，插件版本只允许动画的一次迭代。 我很困惑，虽然这对其他人来说可能是显而易见的？
好吧，它似乎是在if语句中对高度的评估。 else if ： curH == toggleMinHeight返回false， else if使用3em导致最终的else if 。 可能是由于该变量中存在单位（ em ）。 上述指南已经过编辑，以反映不应使用这些单位。
参考文献：
-
animate()。 -
:animated选择器 。 -
attr()。 -
click()。 -
each()。 -
height()。 -
is()。
并不是的。 调用slide方法时，它将获取style属性
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"; );
动画的问题究竟是什么？
我建议你玩得很棘手;
为什么你没有滑动div上方的div具有相同的宽度和颜色，因此它总是显示并显示为滑动部分的一部分