左侧和右侧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
工作,而不仅仅是移动像素改变
尝试animate()
$('#plrt').on("click",function(){
$('.plwid').animate({ left: '+=120' }, 400);
});
注意'live'已弃用。 – deex
@dqlopez我刚刚使用OP的代码,但好点 - 更新 –
@dqlopez这就是我使用'.live',糟糕的习惯使用1.7之前的糟糕习惯@zoltan,谢谢先生,这工作像一个魅力 – JimmyBanks
试试这个
$('#plrt').on('click', function() {
$('.plwid').animate({ left: '+=120', 5000 });
});
我掀起了一个我认为你正试图实现的简单例子。
你应该检查出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>
您是否尝试过用动画? – Jrod
@dqlopez。你需要在链接中使用'http://',所以它会起作用... – gdoron
向我们展示一些[demo](http://jsfiddle.net),或者如@Jrod ['animate()'](http ://api.jquery.com/animate/)。 – deex