我有一个 div,它使用 slideToggle 和缓动来折叠和展开。
$('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);
}
});
但是这个演示有一些问题:
- 没有超出基本 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');
- slideToMin:这可以是一个带引号的字符串,例如“3em”、“20px”,也可以是一个不带引号的数字,例如
30
。 , 代表你希望元素滑动到的高度。如果未提供单位,则默认情况下高度被视为以像素为单位。 - duration:动画持续的毫秒数。
- easing:
一个带引号的字符串,定义要在动画中使用的缓动类型;如果没有 jQuery UI,这要么是“线性”,要么是“摆动”。 与 jQuery UI 其他选项可能是可能的,但这是未经测试的。如果未指定,则动画默认为“线性”。因为在带引号的字符串中使用单位会导致最终的else if
要返回 false(显然,我想……唉),请为此变量仅使用一个未加引号的数字参数(或编辑插件以正确处理带单位的带引号的字符串……)。
一个更大的问题,直到我发布这个我才意识到,插件版本只允许 一次 动画迭代。我对此感到困惑,尽管这对其他人来说可能是显而易见的?
好吧,看来是if
里面的高度评价了陈述。使用 3em
导致最终else if
: curH == toggleMinHeight
返回假。大概是由于该变量中存在单位( em
)。上述指南经过编辑,以反射(reflect)不应使用这些单位。
引用资料:
关于jquery - 是否可以使用 Easing slideToggle 一个 div 并设置一个最小高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8464899/