在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動畫上跳躍文本

回答

相關問題