[英]Using JQuery to animate size of div
I am an amateur in Jquery but am so close to getting what I am looking for. 我是Jquery的业余爱好者,但离我想要的东西非常近。 I am trying to have a containing div animate to a larger height when an object is clicked.
单击对象时,我试图将包含div的动画设置为更大的高度。 I am using the following code:
我正在使用以下代码:
<div id="sliderone">
<div id="nav">
<div id="navone" style="text-align: center;">This is a clickable title</div>
</div>
<div id="ourteam">
<div id="title"></div>
</div>
</div>
<script type="text/javascript">
$('#navone').click(function(){
$('#title').html("<img src='http://placehold.it/350x550' alt='' />");
$('.post-8 .content-container').animate({height: '950'});
});
</script>
#navone {
padding:20px 20px;
cursor:pointer;
}
#title {
width:350px;
margin:0 auto;
}
#sliderone {
height:50px;
background-color:#777777;
position: absolute;
margin-top: -500px;
left: 50%;
margin-left: -175px;
}
#sliderone
has to be absolutely positioned and so when I try to animate .post-8 .content-container
it makes the top longer in comparison instead of making the bottom longer to contain the new content. #sliderone
必须绝对定位,因此当我尝试为.post-8 .content-container
设置动画时,与之相比,它会使顶部更长,而不是使底部更长以包含新内容。 Can I either animate the negative margin smaller or animate the bottom of the .post-8 .content-container
? 我可以将负边距动画化还是将
.post-8 .content-container
底部动画化?
Thank you for any help. 感谢您的任何帮助。 I have worked hard on this and just can't quite figure out this last problem.
我为此付出了很多努力,只是无法完全弄清最后一个问题。
Here is the actual page to see. 这是实际要查看的页面。
http://s416809079.onlinehome.us/wp-login login:stackoverflow password:stackoverflow http://s416809079.onlinehome.us/wp-login登录名:stackoverflow密码:stackoverflow
You might want to try using some of jQuery's slideDown
, slideUp
or slideToggle
methods. 您可能想尝试使用jQuery的一些
slideDown
, slideUp
或slideToggle
方法。 Since you are specifically looking to slide the container I imagine this might be more specific to your needs. 由于您特别希望滑动容器,因此我想这可能会更符合您的需求。
See this example based on what you have above: http://jsfiddle.net/82kHV/13/ 根据上面的内容查看此示例: http : //jsfiddle.net/82kHV/13/
Also links to jQuery methods: http://api.jquery.com/category/effects/sliding/ 还链接到jQuery方法: http : //api.jquery.com/category/effects/sliding/
You will set the element's height you want in your CSS
. 您将在
CSS
设置所需元素的高度。 jQuery will interpolate and animated from 0 to this defined value in slideDown
and the reverse in slideUp
. jQuery将内插和从0到动画在此定义的值
slideDown
和反向slideUp
。 slideToggle
will take initial state of the element and do the opposite or toggle. slideToggle
将采用元素的初始状态,然后进行相反或切换。
I guess you have this situation --> http://jsfiddle.net/z7M2Y/15/ . 我猜你有这种情况-> http://jsfiddle.net/z7M2Y/15/ 。 If that is the case you need to animate too the
height
for #sliderone
: 如果是这种情况,则您也需要为
#sliderone
设置height
动画:
$('#sliderone').animate({height: '225px'});/*The value you calculate*/
Check this demo http://jsfiddle.net/z7M2Y/26/ 查看此演示http://jsfiddle.net/z7M2Y/26/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.