div onclick 上的 div 转换

Question

我需要有两个 div 一个在另一个之上，当我点击一个图像时，我希望第二个 div 滑过第一个。

为什么我无法在 onclick 上运行我的代码，而如果我将 onclick 更改为 AboutUs，它反而会运行？

类似的东西

.AboutUsH {
  height: 400px;
  overflow: hidden;
}
.move-in-to-place {
  position: absolute;
  bottom: -100%;
  height: 100%;
  width: 100%;
  background: #AAAAAA;
  opacity: 0;
  height: 0;
}
.AboutUsH img.clicked {
  bottom: 0;
  -webkit-transition: all 1s, -webkit-transform 1s;
  transition: all 1s, transform 1s;
  height: 100%;
  opacity: 1;
}

<div id="AboutUsVisual">
  <asp:Panel ID="Centering" runat="server" CssClass="Centering">
    <div runat="server" id="contattaciDe" class="contattaciDe">
      <img alt="" src="App_Themes/StandardSite/contact_blu.png" />
    </div>
    <div runat="server" id="catalogoDe" class="catalogoDe">
      <a href="/pdf/Catalogo.pdf" target="_blank">
        <img alt="" src="App_Themes/catalogue_blu.png" />
      </a>
    </div>
  </asp:Panel>
</div>
<div id="AboutUs" class="Centering AboutUsH">
  <h1 id="LBLTitle" runat="server">LBLTitle</h1>
  <asp:Literal ID="LTR" runat="server"></asp:Literal>
  <div class="Eraser"></div>
  <div id="formContact" class="move-in-to-place">
    Form content
  </div>
</div>

有什么想法吗？

谢谢

Answer 1

$('.blue').click(function(){
    //expand red div width to 200px
    $('.red').animate({width: "200px"}, 500);
    setTimeout(function(){
        //after 500 milliseconds expand height to 800px
        $('.red').animate({height:"800px"}, 500);
    },500);
    setTimeout(function(){
        //after 1000 milliseconds show textarea (or textbox, span, etc)
        $('.red').find('input[type="textarea"]').show();    
    },1000);
});