[英]Animate jQuery height percentage
When I'm trying to animate percentage, it's not animating, but expanding to whole height instantly. 当我试图制作百分比动画时,它不是动画,而是立即扩展到整个高度。 I want it to expand to 100%, but smoothly
我希望它扩展到100%,但顺利
CSS: CSS:
#block-views{
overflow:hidden;
height:20px;
}
HTML: HTML:
<div id="block-views">
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
6<br/>
7<br/>
8<br/>
9<br/>
10<br/>
</div>
<a href="#" class="loadmore">Load more</a>
Jquery code: Jquery代码:
$(function() {
$( ".loadmore" ).toggle(
function() {
$( "#block-views" ).animate({
height: "20px",
}, 1000 );
},
function() {
$( "#block-views" ).animate({
height: "100%",
}, 1000 );
}
);
});
When I click on load more, it expands to 100% instantly, not smoothly, but when I click on it second time, it decreases size to 20 px smoothly. 当我点击加载更多时,它会立即扩展到100%,而不是平滑,但是当我第二次点击它时,它会将尺寸平滑地减小到20像素。 I tried to watch expanding process in Chrome's inspector tool and I can clearly see that percentage is adding smoothly, but numbers aren't integers, and Chrome doesn't seem to recognize it.
我尝试在Chrome的检查器工具中观察扩展过程,我可以清楚地看到百分比正在顺利添加,但数字不是整数,Chrome似乎无法识别它。 How can I solve this?
我怎么解决这个问题?
I would suggest this post from the JQuery forums would be suitable to your requirements. 我建议来自JQuery论坛的这篇文章将适合您的要求。
http://forum.jquery.com/topic/jquery-animate-with-a-percentage-placed-div http://forum.jquery.com/topic/jquery-animate-with-a-percentage-placed-div
I'm pretty sure that's not legal. 我很确定这不合法。 You can't mix px and percent - it has no way to convert between them.
你不能混合px和百分比 - 它无法在它们之间进行转换。
There are two ways come to my mind. 我想到了两种方式。
First way is your way, i find a comma ,
mistake here: and need to use position:aboslute;
第一种方式是你的方式,我在这里找到一个逗号
,
错误:并且需要使用position:aboslute;
css property. css属性。 and last thing change your main response functions order.
最后一件事改变你的主要响应函数顺序。
Here is working jsFiddle. 这是工作jsFiddle。
$(function() {
$( ".loadmore" ).toggle(
function() {
$( "#block-views" ).stop().animate({
height: "20px"//if you wont use another animate property; dont use comma here
}, 1000 );
},
function() {
$( "#block-views" ).stop().animate({
height: "100%"
}, 1000 );
}
);
});
Structure is like this = .animate( properties [, duration] [, easing] [, complete] ) 结构就像这样= .animate(properties [,duration] [,easing] [,complete])
multiple animate function should be like this: .animate({'height':'20px','width':'20px'},1000);
多个动画函数应该是这样的:
.animate({'height':'20px','width':'20px'},1000);
Second way is my way, you can add +20px height for every click: 第二种方式是我的方式,你可以为每次点击添加+ 20px高度:
$(function() {
$( ".loadmore" ).click(function() {
$("#block-views").animate({'height':'+=20px'},1000);
});
});
I've found a solution for this problem (sorry for being late). 我找到了解决这个问题的方法(抱歉迟到了)。 What you need to do is to make additional wrapper inside #block-views element, which will have actual height information:
你需要做的是在#block-views元素中创建额外的包装器,它将具有实际的高度信息:
<div id="block-views"> //height is 20px now
<div class="wrapper"> //has its full height in px
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
6<br/>
7<br/>
8<br/>
9<br/>
10<br/>
</div>
</div>
Now in javascript you can pass .wrapper height to animate() function: 现在在javascript中你可以将.wrapper height传递给animate()函数:
$('#block-news').stop().animate({'height': $('#block-news .wrapper').height()}, 1000);
Worked for me. 为我工作。 For toggle you can add new variable and store initial height (20px) there.
要切换,您可以添加新变量并存储初始高度(20px)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.