Блог вебмастера

Не первый раз сталкиваюсь с этой проблемой, но обычно выручали различные «костыли». Сейчас решил разобраться. Суть в следующем: если в анимации начальное и конечное значение в процентах и разных знаков, объект будет «дёргаться».



Пример:

<style type="text/css">

 #div-1 { position: absolute; width: 100px; height: 100px; background: grey; border: 1px solid black; top: 50%; margin-left: 50%; }

</style>



<script type="text/javascript">

 $(function(){

  $('#link-1').click(function(e){

   e.preventDefault();

   $('#div-1').animate({ left: '25%' });

  });

  $('#link-2').click(function(e){

   e.preventDefault();

   $('#div-1').animate({ left: '-25%' });

  });

 });

</script>



<div id="div-1" style="left: -25%;"></div>

<a href="#" id="link-1">Animate to 25%</a>

<a href="#" id="link-2">Animate to -25%</a>

AD: