jquery div 애니메이션 상단에 텍스트 점프

-1

애니메이션이 적용된 채색 된 블록에 텍스트가 있어야합니다. 최종 결과는 사용자가 특정 온도를 클릭 할 때 상승하는 온도계와 같다고 생각되지만 아직은 아닙니다.jquery div 애니메이션 상단에 텍스트 점프

어쨌든, 나는 빨간색으로 div을 넣은 다음 온도계 그림이있는 div을 입력 한 다음 위에 숫자를 텍스트로 넣어이 작업을 수행 할 수 있다고 생각했습니다. 그런 다음 기본 jQuery CSS 애니메이션을 사용하여 숫자를 클릭하면 온도계 위로 빨간색 div를 이동할 수 있습니다.

나는 지금까지 자바 스크립트가 있습니다

여기

$(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/XLL/ – bondythegreat

은 크롬에서 잘 어울립니다. – rkw

사용이 CSS :

p { 
    margin: 0px; 
}

이 jsFiddle

출처

2016-05-25 09:02:06

jquery div 애니메이션 상단에 텍스트 점프

답변

관련 문제