javascript - jquery - 按钮在固定百分比的网络应用程序中调整固定 div 的大小？

Question

我已经为此奋斗了几个小时(我对 js 有点陌生)，我决定将其提交给社区。我有这个我正在构建的网络应用程序，它完全基于屏幕尺寸的百分比。 div 是固定位置，内容在这些 div 中是绝对的。这是 fiddle :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)、(3)，我想要原始比例的 div。另一个问题是，当单击按钮 (imgs) 时，它们的背景会保持不变，而不是切换到下一个单击的按钮，正如我试图在最后一段代码中识别的那样。

如有任何帮助，我们将不胜感激。提前致谢!

Answer 1

好的，我找到了解决方案(基本上我重写了所有内容)。它不漂亮，但它有效。这是新的 jfiddle:http://jsfiddle.net/MycF6/42/如果你有兴趣。

和脚本:

$(document).ready(function () {
    $("#dash").click(function () {
        $("#stream").animate({
            width: "0"
        }, "fast").hide("slide", {
            direction: "left"
        }, "fast");
        $("#dash").addClass("clicked");
        $("#fb").removeClass("clicked");
        $("#twit").removeClass("clicked");
        $("#work").animate({
            width: "100%"
        }, "slow");
    });
    $("#twit").click(function () {
        $("#work").animate({
            width: "59%"
        }, "fast");
        $("#twit").addClass("clicked");
        $("#dash").removeClass("clicked");
        $("#fb").removeClass("clicked");
        $("#stream").animate({
            width: "40%"
        }, "fast").show("slide", {
            direction: "left"
        }, "slow");
    });
    $("#fb").click(function () {
        $("#work").animate({
            width: "59%"
        }, "fast");
        $("#twit").removeClass("clicked");
        $("#dash").removeClass("clicked");
        $("#fb").addClass("clicked");
        $("#stream").animate({
            width: "40%"
        }, "fast").show("slide", {
            direction: "left"
        }, "slow");
    });
});