为了账号安全,请及时绑定邮箱和手机立即绑定

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>


正在回答

1 回答

貌似我改成relative挺顺畅的。不过你的意思是你运行时候会顿一下?布局?

0 回复 有任何疑惑可以回复我~
#1

Collus 提问者

采用relative确实解决了问题,不过还是不太懂错误原因,再学习一下CSS布局找找原因,多谢啦
2016-06-19 回复 有任何疑惑可以回复我~
#2

宝慕林9293779 回复 Collus 提问者

共勉学习,如何?
2016-06-19 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
jQuery基础课程
  • 参与学习       154768    人
  • 解答问题       7184    个

加入课程学习,有效提高前端开发速度

进入课程

JQuery基础课程7-13的编程题中,首次点击右移时会向左抖动一下,请大神帮忙解决一下!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信