javascript - 简单的 JS CSS 更改？

Question

在这里，我得到了一个标题 div，我想将它平滑地扩展到 height:300px onClick。我是 JS 的菜鸟，各种教程都对我不利。看到这个。

HTML：

   <div style="position:absolute; font-family:century gothic; width:100%; top: 45px;        font-size: 20px; margin:0px; height:130px; margin-top:0px; text-align:center; ">
<div style="background:white; width:100%; z-index:2; border-bottom: 1px solid gray; box-shadow: 0px 0px 10px; position:fixed; height: 70px; top:0px;">
<img src="http://i43.tinypic.com/10qanv9.gif" onmouseover="this.src='http://i43.tinypic.com/28150s3.gif'" onmouseout="this.src='http://i43.tinypic.com/10qanv9.gif'" height="70px" style="margin-top:0px;">
</div>
    <!--When clicked, expand this div to 'height:300px', the logo should stay as the one glowing one.-->

Answer 1

首先，你缺少一个结束</div>标签

要为高度设置动画，请div使用id诸如<div id = "myDiv">然后导入和使用 jQuery 的标记，如下所示：

$('#myDiv').click(function(){
  $(this).animate({height: "300px"}, 1000); 
});

第二个参数是以毫秒为单位的动画时间。

对于 JavaScript 和 jQuery 的新手课程，我推荐 www.codeacademy.com