左侧和右侧jQuery动画运动

使用jquery的.css()我正在改变左侧属性值来左右移动div。我正在寻找一种方式来为这种变化发生动画。没有尝试过的工作，我尝试过jQueryUI的.show(slide)函数，但这会移动整个div，而不仅仅是我需要的120px运动。左侧和右侧jQuery动画运动

这是工作没有动画我目前的功能：

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

这是滑动功能，它不能正确作为整个DIV从display:hide去display:show工作，而不仅仅是移动像素改变

来源

2012-05-24 JimmyBanks

您是否尝试过用动画？ – Jrod

@dqlopez。你需要在链接中使用'http：//'，所以它会起作用... – gdoron

向我们展示一些[demo]（http://jsfiddle.net），或者如@Jrod ['animate（）']（http ：//api.jquery.com/animate/）。 – deex

尝试animate()

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

来源

2012-05-24 01:22:11

注意'live'已弃用。 – deex

@dqlopez我刚刚使用OP的代码，但好点 - 更新 –

@dqlopez这就是我使用'.live'，糟糕的习惯使用1.7之前的糟糕习惯@zoltan，谢谢先生，这工作像一个魅力 – JimmyBanks

试试这个

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

来源

2012-05-24 01:24:09

我掀起了一个我认为你正试图实现的简单例子。
你应该检查出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>

来源

2012-05-24 01:25:43 N1ck

左侧和右侧jQuery动画运动

回答

相关问题