私はこのスクリプトhttp://jsfiddle.net/Z8cuz/2/ コードを持っています:
$('.list').hide();
$('.close').hide();
var widthVal = false;
$('#left').click(function () {
if (widthVal == false) {
$('#middle').hide('fade', 300);
$('#right').hide('fade', 300, function () {
$('#left').find('.list').show();
$('#left').find('.close').show();
$('#left').animate({
width: "96%",
opacity: 1
}, 1000);
});
widthVal == true;
}
});
$('#middle').click(function () {
if (widthVal == false) {
$('#left').hide('fade', 300);
$('#right').hide('fade', 300, function () {
$('#middle').find('.list').show();
$('#middle').find('.close').show();
$('#middle').animate({
width: "96%",
opacity: 1
}, 1000);
});
widthVal == true;
}
});
$('#right').click(function () {
if (widthVal == false) {
$('#left').hide('fade', 300);
$('#middle').hide('fade', 300, function () {
$('#right').find('.list').show();
$('#right').find('.close').show();
$('#right').animate({
width: "96%",
opacity: 1
}, 1000);
});
widthVal == true;
}
});
$('.close').click(function (e) {
e.stopPropagation();
$(this).parent().animate({
width: "30%",
opacity: 1
}, 1500, function(){
widthVal == false;
$('#left').show('fade', 600);
$('#middle').show('fade',600);
$('#right').show('fade', 600);
$('.list').hide();
$('.close').hide();
});
});
左のボックスをクリックすると問題なく動作しますが、中央または右のボックスをクリックすると左に移動し、幅が変わります。位置を保持して幅を変更したい。