<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>1</title>
<script src="../../try/jquery-2.1.3.js"></script>
<script>
$(function(){
$("#panel").click(
function(){
$(this).animate({left: "1000px"},3000)
.animate({right: "1000px"},3000);
})
})
</script>
<style>
#panel{
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;
}
</style>
</head>
<body>
<div id="panel"></div>
</body>
</html>
left和right原本就冲突。。你要是想还原设置left为0就好了
$(function () {
$("#panel").click(
function () {
$(this).animate({ left: "1000px" }, 3000)
.animate({ left: "0px" }, 3000);
})
})
你的目的是想做左右移动么????
left和right是互相冲突的,在css中,如果设置了left的值,再怎么设置right都无效,你只有重新将left值设置为auto,这时的right值才会有效。
.pane1 {
position: absolute;
left: auto;
right: 100px;
width: 100px;
height: 100px;
border: 1px solid gray;
}
在js中,animate不支持这样设置,所以你还是设置left或者right中的一个。
$(this).animate({"left": "1000px"},3000)
.animate({
"left": "auto",
"right": "1000px"
},3000);
})