在jquery div动画上跳跃文本

-1

我想在彩色块中添加一些动画文本。最终的结果应该就像温度计在用户点击某个温度时上升，但我还没有到达！在jquery div动画上跳跃文本

无论如何，我认为我可以通过在底部放置一个红色的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不太熟练。

来源

2011-12-13 Petrov

它的工作对我罚款。 http://jsfiddle.net/W77T5/ –

我检查了jsfiddle这一切都没问题。 “文字跳跃”是什么意思？ http://jsfiddle.net/bondythegreat/XyLNG/ – bondythegreat

在铬上看起来不错。 – rkw

使用这个CSS：

p { 
    margin: 0px; 
}

检查它jsFiddle

来源

2016-05-25 09:02:06

在jquery div动画上跳跃文本

回答

相关问题