Question

我希望在彩色块中有一些动画效果。最终的结果应该像温度计一样，当用户点击某些温度时会升起，但我还没到那里！

无论如何，我想我可以通过在底部放置一个红色div，然后在温度计的图片上放置另一个div，然后在文本上放置数字。然后，当我点击数字时，我可以使用基本的jQuery CSS动画将红色div移动到温度计上。

到目前为止我有这个Javascript：

$(document).ready(function()
  {
  $("#1").click(function(){
    $("#box").animate({height:"300px"},"slow");
  });
  $("#2").click(function(){
    $("#box").animate({height:"100px"},"slow");
  });
});

这是我的HTML：

<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
    <p id='1'>hello</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p id='2'>goodbye</p>
</div>

当我点击“你好”p时，绿色方块会按原样扩展，当我点击“再见”p时，绿色方块完全按照应有的方式收缩 - 但两者都是时间，文字跳跃。

有没有办法解决这个问题？这是一个相当简单的动画，但我对jQuery并不熟练。

Answer 1

使用此css：

p {
  margin: 0px;
}

在jsFiddle

上查看

在jquery div动画上跳跃文本

1 个答案: