JQuery基础课程7-13的编程题中,首次点击右移时会向左抖动一下,请大神帮忙解决一下!
本节编程题中,我的代码实现的首次点击右移时会向左抖动一下,之后就没问题,请大神帮忙看一下代码哪里出问题了,谢谢~
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<title>jQuery动画特效</title>
<style type="text/css">
*{marin:0px;padding: 0px;}
#div1{
position: absolute;
width: 100px;
height: 60px;
margin-left: 200px;
margin-top: 15px;
line-height: 60px;
border:solid 1px red;
background-color: #ccc;
color:black;
text-align: center;
}
input{
margin:100px 200px 10px 200px;
width: 60px;height: 30px;
}
</style>
</head>
<body>
<div id="div1">我是小滑块</div>
<input type="button" id="btnleft" value="往右推" />
<input type="button" id="btnright" value="往左推" />
<script type="text/javascript">
$(function() {
$("#btnleft").bind('click', function() {
$("#div1").animate({left: "+=420px"}, 1000,function () {
$("#btnleft").attr('disabled',true);
$("#btnright").attr('disabled',false);
})
});
$("#btnright").bind('click', function() {
$("#div1").animate({left:"-=420px"}, 1000,function () {
$("#btnright").attr('disabled',true);
$("#btnleft").attr('disabled',false);
})
});
})
</script>
</body>
</html>