Question

我是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 登录：计算器密码：计算器

Answer 1

您可能想尝试使用jQuery的slideDown，slideUp或slideToggle方法。由于您特意想要滑动容器，我想这可能更符合您的需求。

根据您的上述内容查看此示例：http://jsfiddle.net/82kHV/13/

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

您将在CSS中设置所需的元素高度。 jQuery将在slideDown中从0插入动画并设置为动画，并在slideUp中反向设置。 slideToggle将获取元素的初始状态并执行相反或切换。

Answer 2

我猜你有这种情况 - ＆gt; http://jsfiddle.net/z7M2Y/15/。如果是这种情况，您需要为height的{{1}}设置动画：

#sliderone

查看此演示 http://jsfiddle.net/z7M2Y/26/

使用JQuery为div的大小设置动画

2 个答案: