我想通过点击它来将 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 会持续动画。
我希望当用户第一次点击时动画就会运行。多次点击不会运行。如何防止用户多次点击？
谢谢。
你可以使用.stop() http://api.jquery.com/stop/函数来结束当前动画，然后在每次后续单击时开始新的动画。这不会阻止多次点击，但可用于阻止多个排队动画。
或者，您可以使用:animated选择器 http://api.jquery.com/animated-selector/检查该元素当前是否没有动画，并且只有在这种情况下才动画。
$(".slide-out-div").click(function() {
var $div = $(this);
if(!$div.is(':animated')) {
if (visible == 0) {
$div.animate({left: "10px"}, "slow");
visible = 1;
} else {
$div.animate({left: "-210px"}, "slow");
visible = 0;
}
}
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
