我正在通过change()事件使用fadeOut和fadeIn。问题是你可以快速选择这两个选项并最终同时发生这两个事件。如何才能使它只发生1个事件,当该事件结束时,如果用户选择该选项,则允许第二个事件发生?
这是我的代码:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/*<![CDATA[*/
.box1{
width: 200px;
height: 200px;
border: 5px solid #000;
}
.box2{
width: 200px;
height: 200px;
border: 5px solid #0f0;
display: none;
}
/*]]>*/
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
$(document).on('change', 'input[name=all]', function(){
var which = $(this).attr('id');
if (which =='b'){
$('.box1').fadeOut(function(){ $('.box2').fadeIn(); });
}
else
{
//$('.check_box_holder_for_playlist_items').show();
$('.box2').fadeOut(function(){ $('.box1').fadeIn(); });
}
});
/*]]>*/
</script>
</head>
<body>
<form name="test" action="http://">
<label><input type="radio" name="all" value="1" id="a" checked="checked" /> Show box 1</label><br />
<label><input type="radio" name="all" value="2" id="b" /> Show box 2</label><br />
</form>
<div class="box1"> first box </div>
<div class="box2"> second box </div>
</body>
</html>
答案 0 :(得分:1)
在脚本中添加一个停止
$(document).on('change', 'input[name=all]', function(){
var which = $(this).attr('id');
if (which =='b'){
$('.box1').stop().fadeOut(function(){ $('.box2').stop().fadeIn(); });
}
else
{
//$('.check_box_holder_for_playlist_items').show();
$('.box2').stop().fadeOut(function(){ $('.box1').stop().fadeIn(); });
}
});
我在这里使用.fadeToggle();
$(document).on('change', 'input[name=all]', function(){
$('.toggle').stop().fadeToggle(500);
});