jQuery toggle() 没有显示，直接消失
黑色幽默 2013-12-02
今天在学习使用jQuery里面的动画功能，animate(),为了方便显示及显示效果测试，打算采用toggle函数，使动画能来回的移动。写了以下一段代码（纯为了学习的简陋代码）：
<html>
<head>
<scripttype="text/javascript"src="./scripts/jquery-1.10.2.js"></script>
<styletype="text/css">
#pic1{
position:relative;
width:100px;
height:150px;
top:100px;
border:1pxdotted;
background-color:#aaa;
cursor:pointer;
text-align:center;
padding:70px;
left:100px;
}
#content{
display:none;
}
</style>
</head>
<body>
<script>
$(function(){
$("#pic1").click(function(){
$(this).animate({left:"500px"},1000);
});
</script>
<divid="pic1">
clickme!
</div>
</body>
</html>
以上代码可以让页面中的div方块移动起来，但是加入toggle()之后，出现了对应div直接消失的问题:
$("#pic1").toggle(function(){
$(this).animate({left:"500px"},1000);
},function(){
$(this).animate({left:"100px"},1000);
});
查阅文档后发现，toggle在1.9以后的版本中就只支持隐藏功能了，因此只能通过“多写多得到“（jQuery号称少写多的来着，去除toogle()的使用方法，让我肃然”不明觉挫“也哉！！）。
这里做了一个简单的判断，如果div的左边距大于500px则向左移，反之向右:
$(function(){
$("#pic1").click(function(){
var$orgLeft=$("#pic1").css("left");
var$distance=500;
var$endLeft;
if(parseInt($orgLeft)>500){
$endLeft=parseInt($orgLeft)-parseInt($distance);
}
else{
$endLeft=parseInt($orgLeft)+parseInt($distance);
}
$(this).animate({left:$endLeft},1000);
});
});
抛砖引玉，希望没砸到人:)
