1

私はこのスクリプト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();
    });
});

左のボックスをクリックすると問題なく動作しますが、中央または右のボックスをクリックすると左に移動し、幅が変わります。位置を保持して幅を変更したい。

4

2 に答える 2

1

この機能を使えば問題は解決する

function sorted(obj){
  var clonedObj = obj.clone();
  obj.remove();
  $('#container').prepend(clonedObj);
}

ここにライブの例があります

于 2013-08-23T18:03:51.560 に答える
0

オプションとして、側面の幅を減らすことができます。アイデアを得るために、#middle div専用のフィドルを作成するコードを確認してください。http://jsfiddle.net/7a7n2/ 真ん中のものを例にしました。 

$('#middle').click(function () {
        if (widthVal == false) {
            $('#left').animate({opacity:'0'},300);
            $('#left').animate({width:'0'},1000);
            $('#right').hide('fade', 300, function () {

                $('#middle').find('.list').show();
                $('#middle').find('.close').show();
                $('#middle').animate({
                    width: "96%",
                    opacity: 1
                }, 1000);
            });
            widthVal == true;
        }
    });
于 2013-08-23T15:52:11.443 に答える