是否可以滑动一个div与Easing和设置最小高度？ [英] Is it possible to slideToggle a div with Easing and set a min-height?
问题描述
我有一个div，使用slideToggle和缓动来折叠和展开。
$（'button'）。 function（）{
$（'div'）。slideToggle（'2000'，easeOutBounce）;
}）;
我想要它，当它的幻灯片上有一个最小高度，以便总是有一个小的可见内容
因此，当它向下滑动 height：（div height）和 slideUp，height：10px; 请注意，div可以有任何高度，这就是为什么我不使用动画。
我能想出的最好的是以下：
var toggleMinHeight = 30，
duration = 2000，
easing ='swing';
$（'。toggles'）。每个（
function（）{
$（this）.attr（'data-height'，$（this）.height b $ b}）。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）{
$ ）.animate（
{
'height'：$（this）.attr（'data-height'）
}，duration，easing）;
}
}）;
这个演示有一些问题，但是：
- 除了基本jQuery库（允许访问swing和linear）指定的缓动功能之外，这可以通过包含jQuery UI来改进。 $ b $
- 需要一个大的，功能的，但不漂亮的
if/else if语句。 - 需要至少一次传递
each（）以指定div元素的默认/自然高度。 - 如果
divs不是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（显然， sigh），请仅为此变量使用无引号的数字参数（或编辑插件以正确处理带单位的带引号的字符串...）。
一个更大的问题，我没有意识到，直到我发布了，是插件版本只允许一个动画迭代。
好吧，它似乎是对中的高度的评估if if 语句。使用 3em 导致最后的 else if ： curH == toggleMinHeight 返回false。大概是由于该变量中存在单位（ em ）。上述指南已编辑，以反映单位不应使用
参考文献：
I have a div of which collapse and expands using slideToggle and easing.
$('button').click(function () {
$('div').slideToggle('2000', "easeOutBounce");
});
I want it when it slide's Up to have a minimum height so that there always a small visible content of it.
So when it's slide down has height:(div height) and on slideUp, height:10px;
Note that the div could have any amount of height so that's why I am not using animation.
The best I could come up with is the following:
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);
}
});
This demo has some issues, however:
- No easing functionality beyond that specified by the basic jQuery library (giving access to 'swing' and 'linear'), this could be improved by including jQuery UI, however.
- It could almost certainly be made into a plug-in, to be somewhat less icky to look at.
- Requires a large, functional but not pretty,
if/else ifstatement. - Requires at least one pass of the
each()to assign the 'default'/'natural' height of the div elements. - If the
divs aren'tposition: absolutethey shrink down to the baseline of the in-line elements (as they'redisplay: inline-block), this may not be a problem if they'refloat: left(orfloat: right, obviously).
Hopefully it's of use, but it's certainly not ideal in its current state.
Edited to post the plugin-ised version of the above (it retains all the same issues as before):
(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: this can be either a quoted string, such as '3em', '20px', or an unquoted number, such as
30, and represents the height to which you want the element to slide to. If there are no units supplied then the height is, by default, considered to be in pixels. - duration: the number of milliseconds for which the animation lasts.
- easing:
a quoted string defining the type of easing to be used in the animation; without jQuery UI this is either 'linear' or 'swing'. With jQuery UI other options may be possible, but this is untested. If unspecified the animation defaults to 'linear.'Because using units in a quoted string causes the finalelse ifto return false (obviously, I suppose...sigh), please use only an unquoted numerical argument for this variable (or edit the plug in to properly deal with quoted strings with units...).
A larger issue that I hadn't realised until I posted this, is that the plugin version only allows one iteration of the animation. Which I'm confused about, though perhaps it's obvious to someone else?
Okay, it appears to be the evaluation of the height in the if statement. Using 3em caused the final else if : curH == toggleMinHeight to return false. Presumably due to the presence of the unit (em) in that variable. The above guidance has been edited to reflect that the units should not be used.
References:
这篇关于是否可以滑动一个div与Easing和设置最小高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
