Question

这里我有一个标题div，我想平滑地扩展到高度：300px onClick。我是JS中的总菜鸟，各种教程都不适合我。请参阅this。

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); 
});

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

关于JavaScript和jQuery的noob课程，我推荐www.codeacademy.com

简单的JS CSS改变？

1 个答案: