用jQuery滑動兩個DIV

Question

我需要兩個DIV層，高度爲&寬度：每個100％，當我點擊DIV1時它必須加載DIV2，當點擊DIV2時，它必須加載DIFF1到Slide from right to left。我按照以下的方式進行編碼工作，但有時DIV沒有重疊，兩個DIV在頂部和底部滑動。

$("#div2").width("0"); 
$("#div1").click(function() { 
    $("#div1").animate({ width: 0 }, "slow"); 
    $("#div2").animate({ width: "100%" }, "slow"); 
}); 
$("#div2").click(function() { 
    $("#div2").animate({ width: 0 }, "slow"); 
    $("#div1").animate({ width: "100%" }, "slow"); 
}); 

任何人都可以幫助我編寫這樣的代碼比我的代碼更好嗎？

Answer 1

這裏有一個工作示例：

$(function() { 
    var $right = $("#right").width(0); 

    $("#slide").click(function() { 
     $("#left").animate({ width: 0 }); 
     $right.animate({ width: "100%" }); 
    }); 
}); 

jsFiddle

Answer 2

$("#div2").width("0"); 

$("#div1").click(myToggle('div1', 'div2')); 

$("#div2").click(myToggle('div2', 'div1')); 

function myToggle(open, close) { 
    $("#"+close).animate({ width: 0 }, "slow"); 
    $("#"+open).animate({ width: "100%" }, "slow"); 
}