javascript - jquery - ボタンは固定パーセンテージWebアプリで固定divのサイズを変更しますか?

Question

私はこれで数時間戦ってきました（私はjsに少し慣れていません）、コミュニティに投稿することにしました。私が構築しているこの Web アプリは、すべて画面サイズのパーセンテージに基づいています。div は固定位置であり、内容はそれらの div 内で絶対的です。ここにフィドルがあります: http://jsfiddle.net/MycF6/31/ と私が取り組んでいるコード:

$(document)
    .ready(function () {
    $("#socialDash")
        .click(function () {
        $("#socialStream")
            .hide("slide", {
            direction: "left"
        }, "1000");
    });
});

$("#socialDash")
    .click(function () {
    $("#workBench")
        .effect("scale", {
        percent: 178,
        origin: ['middle', 'right'],
        direction: 'horizontal'
    }, 700);
});

$("#niner")
    .click(function () {
    $("#socialStream")
        .show("slide", {
        direction: "left"
    }, "1000");
    $("#workBench")
        .effect("scale", {
        percent: 56,
        origin: ['middle', 'right'],
        direction: 'horizontal'
    }, 500);
});

$(".socialButton")
    .click(function () {
    $("socialButton")
        .removeClass(".clicked");
    $(this)
        .addClass(".clicked");
});

左側の一番上のボタンをクリックすると (1) 内部コンテンツの左側の div が左にスライドし、右側の div が展開してその場所に配置されるようにしたい。他の 2 つのボタン (2)、(3) については、元の比率の div が必要です。もう 1 つの問題は、ボタン (imgs) がクリックされたときに、コードの最後のビットで特定しようとしたときに、次にクリックされたボタンにスワップするのではなく、背景が持続することです。

どんな助けでも大歓迎です。前もって感謝します！