Размытая анимация. Как исправить? [Архив форума]

Просмотр полной версии : Размытая анимация. Как исправить?

Dimaz

31.01.2013, 20:51

Всем привет. Как можно сделать анимацию более плавной и вообще, возможно ли это?
$(document).ready(function(){
var i = 0;
$(document).keydown(function(event) {
if(event.which == 39){
$('div').css("margin-left",""+i+"px");
i+=6;
}
});
});
Нажимаем клавишу со стрелочкой вправо и блок div меняет свои координаты. Но анимация дерганая. Реально ли в javascript добиться более плавного эффекта при этой же скорости? Вот ссылка на рабочий скрипт http://jsfiddle.net/GP9Q2/

Deff

31.01.2013, 21:16

$(document).ready(function(){
var i = 0;
$(document).keydown(function(event) {
if(event.which == 39){
$('div').animate({"margin-left":""+i+"px"},1500);
i+=6;
}
});
});
iv').animate("margin-left",""+i+"px");

Dimaz

31.01.2013, 21:44

Спасибо. Вроде небольшой эффект есть.

Deff

31.01.2013, 22:19

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
div{
height: 20px;
width: 20px;
background-color: red;
}
</style>
<script type="text/javascript">
var i = 0;
var deLtaI=6;
var delay=parseInt(deLtaI*3.6);

$(document).keydown(function(event) {
if(event.which == 39){
$('div').stop(true).animate({"margin-left":""+i+"px"},delay,'linear',function() {
i+=deLtaI;});
}
});

</script>
</head>
<body style="">
<div></div>
</body>
</html>