我正在尝试为推送框设置动画以显示该区域要做的事情的列表。
不幸的是,如果您足够快地单击 2 个或更多框,它会展开所有单击的框,然后锁定框以防止再次被选中。
您可以单击任何未选中的框,它会起作用,但我终生无法阻止其中两个同时出现的问题。
我不是 100% 确定我是否正确使用了 .stop 命令。
请帮忙!
这是我的代码。这里还有一个带有一些演示的 jsfiddle 链接。http://jsfiddle.net/hceFT/4/
$(document).ready(function() {
$("#attractionsbox").css( { width:0 } );
$("#entertainmentbox").css( { width:0 } );
$("#diningbox").css( { width:0 } );
$("#attractionspointer").css( { width:0 } );
$("#entertainmentpointer").css( { width:0 } );
$("#diningpointer").css( { width:0 } );
$("#experiences").css( 'overflowY' , 'hidden' );
});
$("#freefunbutton").click(function() {
if ($("#freefunbox").width()) {} else {
$(".contentbox").stop(true, false).animate({
width: 0
}, 200, function() {
$(".pointer").animate({
width: 0
}, 50, function() {
$("#freefunpointer").animate({
width: 40
}, 50, function() {
$("#freefunbox").animate({
width: 500
}, 200);
});
});
});
}
});
$("#attractionsbutton").click(function() {
if ($("#attractionsbox").width()) {} else {
$(".contentbox").stop(true, false).animate({
width: 0
}, 200, function() {
$(".pointer").animate({
width: 0
}, 50, function() {
$("#attractionspointer").animate({
width: 40
}, 50, function() {
$("#attractionsbox").animate({
width: 500
}, 200);
});
});
});
}
});
$("#entertainmentbutton").click(function() {
if ($("#entertainmentbox").width()) {} else {
$(".contentbox").stop(true, false).animate({
width: 0
}, 200, function() {
$(".pointer").animate({
width: 0
}, 50, function() {
$("#entertainmentpointer").animate({
width: 40
}, 50, function() {
$("#entertainmentbox").animate({
width: 500
}, 200);
});
});
});
}
});
$("#diningbutton").click(function() {
if ($("#diningbox").width()) {} else {
$(".contentbox").stop(true, false).animate({
width: 0
}, 200, function() {
$(".pointer").animate({
width: 0
}, 50, function() {
$("#diningpointer").animate({
width: 40
}, 50, function() {
$("#diningbox").animate({
width: 500
}, 200);
});
});
});
}
});