                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

当我多次点击时怎么让它只执行一次，或者说动画结束后在点击才有效，而不是点了几次就运动几次

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery动画特效</title>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

<style type=text/css>

div{width:200px;height:200px;background:red;position:absolute;left:100px;}

</style>

</head>

<body>

<input id="left" type="button" value="左移">

<input id="right" type="button" value="右移">

<div></div>

<script type="text/javascript">

$(function(){

$("#left").bind("click",function(){

$("div").animate({

left:"-=50px"

},1000)

})

$("#right").bind("click",function(){

$("div").animate({

left:"+=50px"

},1000)

})

})

</script>

</body>

</html>

慕工程3118143

2016-05-24

源自：jQuery基础课程 7-13

关注问题我要回答

1668

操作

收起

4 回答

cireay
2016-05-24

可以用定时器，执行一次清除一次定时器

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

qq_橙红年代_0
2016-05-24

我也是刚学jQuery，不知道动画的内部代码，估计也是用定时器做的，用JS解决你的问题的话需要每次点击去清除定时器，贴上JS的代码，希望能帮到你。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

div{width: 100px;height: 100px;background: red;position: absolute;left: 200px;top: 200px;}

</style>

<script type="text/javascript">

window.onload = function(){

function getStyle(obj,attr){

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];

}

var oDiv = document.getElementsByTagName("div")[0];

var aBtn = document.getElementsByTagName("input");

aBtn[0].onclick = function(){

move(oDiv,"left",-10,50);

};

aBtn[1].onclick = function(){

move(oDiv,"left",10,800);

};

function move(obj,attr,speed,target){

//;

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var pos = parseInt(getStyle(obj,attr));

if (speed<0 && pos < target || speed>0 &&pos>target){

pos = target;

clearInterval(obj.timer);

}

obj.style[attr] = pos + speed + "px";

},50);

}

}

</script>

</head>

<body>

<input type="button" value="left">

<input type="button" value="right">

<div></div>

</body>

</html>

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

qq_吃药先森_03169839
2016-05-24

可以在你的click下面加一个判断，判断你的left值是否能被50整除。能整除说明已经动画移动完毕，在执行下面的函数，但是你的初始值要能被50整除

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

哦哦小弟弟
2016-05-24

你的对的呀。我试了一下。正确的呀！

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery动画特效</title>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>

<body>

<input type="button" value="按钮1" id="button1">

<input type="button" value="按钮2" id="button2">

<div id="box" style=" width:50px; height:50px; background-color:#000 ; margin-top:20px; position:relative"></div>

<script type="text/javascript">

$(function(){

$("#button1").click(function(){

$("#box").animate({left: "+=50px"},300);

});

$("#button2").click(function(){

$("#box").animate({left: "-=50px"},300);

});

})

</script>

</body>

</html>

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

举报

0/150

提交

取消

jQuery基础课程

参与学习 154768 人
解答问题 7184 个

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

当我多次点击时怎么让它只执行一次，或者说动画结束后在点击才有效，而不是点了几次就运动几次

我要回答关注问题

意见反馈帮助中心 APP下载