$('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); } });
但是,这个演示有一些问题:
>没有基本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');
> 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()