jQuery анимация движения влево и вправо

Question

Использование jquery's .css() Я меняю значение атрибутов слева, чтобы переместить div влево или вправо. Я ищу способ оживить это изменение по мере его возникновения. Ничего из того, что ive пыталось работать, ive попробовал функцию jQueryUI .show(slide), но это перемещает весь div, а не только движение 120px, которое мне нужно.

Это моя текущая функция, которая работает без анимации:

$('#plrt').live("click",function(){ 
    var lm=$('.plwid').css("left"); 
    lm = (parseInt(lm) + 120); 
    $('.plwid').css("left", lm);  
}); 

это функция слайд, он не работает должным образом, как весь ДИВ идет от display:hide к display:show, а не просто перемещая пиксель изменить

Answer 1

попробовать animate()

$('#plrt').on("click",function(){ 
    $('.plwid').animate({ left: '+=120' }, 400); 
}); 

Answer 2

попробовать этот

$('#plrt').on('click', function() { 
    $('.plwid').animate({ left: '+=120', 5000 });  
}); 

Answer 3

Я быстро взвесил пример того, что, как я думаю, вы пытаетесь достичь.
Вы должны зарегистрироваться jQuery Animate.

//note live is deprecated 
 
$('#plrt').on("click", function() { 
 
    //perform custom animation to add 120px to current left CSS position 
 
    $('.plwid').animate({ 
 
    left: '+=120' 
 
    }); 
 
});

#plrt{ 
 
    position:relative; 
 
    background:red; 
 
    width:100px; 
 
    height:100px; 
 
    cursor:pointer; 
 
} 
 

 
.plwid{ 
 
    position:absolute; 
 
    background:blue; 
 
    width:100px; 
 
    height:100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="plrt"></div> 
 
<div class="plwid"></div>