(js) div x 픽셀을 jquery 또는 유사하게 부드럽게 이동하려면?

Question

이미지를 클릭하면 ~ 200 픽셀까지 div를 이동해야합니다. jquery를 사용하여 isssue없이 CSS를 수정하도록 설정했지만 다른 웹 사이트에서 보았 듯이 '깨끗한'모양으로 보이지 않습니다.

용서해주세요.하지만 몇 시간 동안 검색했는데이 기능/방법을 찾을 수 없으므로 fadein/out이이 작업을 수행 할 것이라고 생각했지만 실제로는 그럴 수 없다고 확신합니다.

누구든지 올바른 방향으로 나를 가리킬 수 있습니까? 고맙습니다.

편집 : 현재 찾고, 이것을 사용 : 나는 어쩌면 생각이 작성 후 나는 빨리 점진적으로 낮은 FPS '글라이드'.. 잘하면 쉬운 방법

EDIT2가 시뮬레이션 JQuery와 통해 CSS를 변경해야 당신은, 당신은 또한 단순히 CSS를 밀리 초마다 XX 번호를 업데이트하는 간격을 사용할 수있는 경우에만 자바 스크립트를 사용하여이 작업을 수행하려면 그도 초당 60 프레임에 대한 의미를

$('#Table_Topbar').hide(); 
var pix = "px"; 
var fix = $('#Table_Middle1').css('top'); 
var fix2 = fix.replace('px',''); 
var fixsub = (fix2 - 200); 
var fixstring = fixsub.toString(); 
var fixconca = fixstring.concat(pix); 
$('#Table_Middle1').css('top',fixconca); 

Answer 1

를 만드는 경우 '원활'를 할 수있는 방법 당신 'd를 사용하십시오 16. (이것은 최선의 방법은 아닙니다)

var i = parseInt($("#Table_Middle1").css("top")); 
var animationLoop = setInterval(function() { i += 10; $("#Table_Middle1").css("top", i + "px"); }, 16); 

더 간단한 방법은 jQuery의 애니메이션 API 인 을 사용하는 것입니다. 당신은 또한 같은 일을 수행하기 위해 CSS3 transition을 사용하고, 이것은 대부분의 "현대"방법 (간단한 클래스 전환에 JS를 줄일 수

$('#Table_Middle1").animate({top: "-=200px"}, 1000); // take 1 second to move up 200px 

(이것은 대부분의 크로스 브라우저 친화적 인 방법입니다))

jQuery: 
$('#Table_Middle1").addClass("class-to-trigger-animation"); 

css: 
#Table_Middle1 { top: 500px; transition: top 1s ease; } 
#Table_Middle1.class-to-trigger-animation { top: 300px } 

더 복잡한 애니메이션을 원하면 Greensock과 같은 라이브러리를 고려해 볼 수 있습니다.

Answer 2

여기서 js (jQuery)와 CSS를 조합하여 사용할 수 있습니다 (예 :

CSS :

.switch {position: absolute; top: 0; left: 0; transition: top 1s} 
.switch.active {top: 160px} 

jQuery를 :

$('.switch').click(function(){ 
    $(this).toggleClass('active'); 
}); 

체크 아웃 여기에 바이올린 : http://jsfiddle.net/pavkr/Lu7q2c1r/1/ 당신은 그러나 매개 변수를 조정해야

,이 그냥 빨리 예입니다.