使用JQuery来动画Div的大小

我是Jquery的业余爱好者，但我非常接近获取我所需要的东西。我试图让一个包含div的元素在点击对象时具有更大的高度。我使用下面的代码：使用JQuery来动画Div的大小

<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必须绝对定位，所以当我尝试动画.post-8 .content-container它使上边长的比较，而不是使底边长为包含新的内容。我可以动画缩小负边距还是动画底部的.post-8 .content-container？

谢谢你的帮助。我在这方面努力工作，只是无法弄清楚最后一个问题。

下面是实际看到的页面。

http://s416809079.onlinehome.us/wp-login 登录：计算器密码：计算器

来源

2013-12-18 nate howard

这里看看http://www.w3schools.com/jquery/jquery_animate.asp – user2167382

什么关于使用jQuery库中的'slideDown'？ –

您正在使用jQuery的类选择器，但这些类不存在于html中。你的选择器不会选择任何东西，因此不会动画。 – Bic

我想你有这种情况 - >http://jsfiddle.net/z7M2Y/15/。如果是这样的话，你需要动画太height为#sliderone：

$('#sliderone').animate({height: '225px'});/*The value you calculate*/

检查这个演示http://jsfiddle.net/z7M2Y/26/

来源

2013-12-18 17:25:35 DaniP

这是接近工作，然而（.post-8 .content容器）实际上不包含#sliderone，所以我使用负顶部边距将其放入它的前面。所以我不需要增大#sliderone的大小，但改变负边距以在底部创建更多空间。然而 - $（'＃sliderone'）。animate（{margin-top：'-225px'}）; 似乎不是有效的。 –

@natehoward我试图帮助...复制整个HTML在一个小提琴... – DaniP

@natehoward检查此与marginTop工作http://jsfiddle.net/z7M2Y/40/ – DaniP

你可能想使用一些jQuery的slideDown，slideUp或slideToggle的方法试一试。既然你是专门寻找滑动容器，我想这可能是更具体到你的需求。

见基于你有什么上面这个例子：http://jsfiddle.net/82kHV/13/

还链接到jQuery方法： http://api.jquery.com/category/effects/sliding/

你将设置你在CSS需要的元素的高度。 jQuery将插入并动画从0到slideDown中的这个定义的值，而slideUp的相反。 slideToggle将采取元素的初始状态并做相反的操作或切换。

来源

2013-12-18 17:13:42

我意识到的问题是（.post-8 .content-container）实际上不包含#sliderone。我正在使用负顶部边距将其放在它的前面。 –

我不确定我是否完全理解，但无论'content-container'的位置如何，'slideToggle'方法都应该是一样的。 –

http://jsfiddle.net/82kHV/16/ –

使用JQuery来动画Div的大小

回答

相关问题