Я хочу иметь какой-нибудь текст в цветном блоке, который оживляет.Предполагается, что конечный результат будет похож на термометр, который поднимается, когда пользователь нажимает на определенные температуры, но я еще не там!
В любом случае, я думал, что смогу сделать это, надев красный div навнизу, затем еще один div с изображением термометра, а затем цифры сверху, как текст.Затем я мог бы использовать базовую анимацию jQuery CSS для перемещения красного делителя вверх по термометру при нажатии на цифры.
Пока у меня есть этот 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> </p>
<p> </p>
<p> </p>
<p id='2'>goodbye</p>
</div>
Когда я нажимаю «привет» p, зеленый квадрат расширяется, как и должно, а когда я нажимаю на «до свидания» p, зеленый квадрат сокращается точно так, как должен- но оба раза текст скачет.
Есть ли способ обойти это?Это довольно простая анимация, но я не слишком опытен в jQuery.