jquery - jQuery 宽度切换将 div 向左移动

Question

我有这个脚本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();
    });
});

当我单击左侧框时，它可以正常工作，但是当我单击中间或右侧框时，它会向左移动，然后改变它的宽度。我希望它保持位置并改变宽度。

Answer 1

使用此功能，您的问题将得到解决

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

这是现场示例

Answer 2

作为一种选择，您可以减少侧面的宽度。检查我只为#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;
        }
    });