javascript - 使用 animate() 滑动 div 元素不起作用

Question

我正在尝试使用 animate() jQuery 方法使我的 div 元素从左向右滑动。每次有人点击按钮时，它应该检查 div 的左属性值。如果该值等于 -90%，它应该从左向右滑动。否则(如果为 0)它应该向后滑动(左:-90%)。

JS:

$("button").click(function() {
    if($("div").css('left') == "-90%"){//check if left:-90%, if true slide it to right
        $("div").animate({left: "0px"},1000);       
    }else{
        $("div").animate({left: "-90%"},1000);//if left is not -90% slide it to left
    }
});;

HTML:

<button>Click Me</button>
<div>
</div>

CSS:

div{
    height:100px;
    width:90%;
    position:absolute;
    background-color:#77A3C5;
    left:-90%;  
}
button{
    display:block;
    position:absolute;
}

Answer 1

不需要花哨的百分比，只要保持简单:

$("button").click(function() {
    if($("div").position().left < 0){
        $("div").animate({left: "0px"},1000);         
    }else{
        $("div").animate({left: "-90%"},1000);
    }
});

演示:http://jsbin.com/juxoko/4/