Форум

Dimaz · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 31.01.2013, 21:44

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

Deff · #4 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript