押し出しボックスをアニメーション化して、その地域でやるべきことのリストを表示しようとしています。
残念ながら、2 つ以上のボックスをすばやくクリックすると、クリックしたすべてのボックスが展開され、ボックスが再度選択されないようにロックされます。
選択されていないボックスのいずれかをクリックすると機能しますが、2 つのボックスが同時に表示される問題を防ぐことはできません。
.stop コマンドを正しく使用していると 100% 確信できるわけではありません。
助けてください！
これが私のコードです。ここには、少しデモのある 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);
});
});
});
}
});