如何防止在div出动画中多次单击 [英] How to prevent multiple clicks in div in-out animation
问题描述
我要在单击它时将div移入和移出.我只是给div设置动画
<head>
<title>Title</title>
<style type="text/css" media="screen">
.slide-out-div {
position:relative;
background: none repeat scroll 0 0 #F2F2F2;
border: 2px solid #29216D;
color: #666666;
font-size: 14px;
padding: 20px;
width: 250px;
left: -210px; }
</style>
</head>
<body>
<div class="slide-out-div">
<form>
<a class="handle" href="http://link-for-non-js-users">SEARCH</a>
<button id="myButton" type="submit" />
</form>
</div>
</body>
这是脚本
$(document).ready(function(){
var visible = 0;
$(".slide-out-div").click(function() {
var $div = $(this);
if (visible == 0) {
$div.animate({left: "10px"}, "slow");
visible = 1;
} else {
$div.animate({left: "-210px"}, "slow");
visible = 0;
}
});
}); //end of $(document).ready(fn)
首先我想问一下我的脚本还可以吗?它正在工作，但这并不意味着它是有效的.其次，当它进入或离开时，如果用户多次单击，则我认为动画进入动画队列并且我的div持续进行动画处理. 我希望当用户第一次单击时动画运行.多次点击不会运行.如何防止用户多次点击?
谢谢.
一个可能的简短解决方案:
$(".slide-out-div").click(function() {
var $div = $(this);
$div.not(":animated").animate({
left: $div.position().left == -210 ? 10 : -210
}, "slow");
});
演示: http://jsfiddle.net/rXW9D/
I want to move div in and out on click of it. I just animate the div like
<head>
<title>Title</title>
<style type="text/css" media="screen">
.slide-out-div {
position:relative;
background: none repeat scroll 0 0 #F2F2F2;
border: 2px solid #29216D;
color: #666666;
font-size: 14px;
padding: 20px;
width: 250px;
left: -210px; }
</style>
</head>
<body>
<div class="slide-out-div">
<form>
<a class="handle" href="http://link-for-non-js-users">SEARCH</a>
<button id="myButton" type="submit" />
</form>
</div>
</body>
Here is the script
$(document).ready(function(){
var visible = 0;
$(".slide-out-div").click(function() {
var $div = $(this);
if (visible == 0) {
$div.animate({left: "10px"}, "slow");
visible = 1;
} else {
$div.animate({left: "-210px"}, "slow");
visible = 0;
}
});
}); //end of $(document).ready(fn)
First i want to ask is my script ok? It is working but it doesn't mean it is efficient. Second when it is coming to or gone from then if user clicks on multiple times then i think the animation goes to animation queue and my div continuously animate. I want that when user click on first time then the animation runs. Multiple clicks don't run. How can i prevent user multiple clicks?
Thank you.
One possible short solution:
$(".slide-out-div").click(function() {
var $div = $(this);
$div.not(":animated").animate({
left: $div.position().left == -210 ? 10 : -210
}, "slow");
});
DEMO: http://jsfiddle.net/rXW9D/
这篇关于如何防止在div出动画中多次单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
