jQuery 点击更改 DIV 的 css

Question

我创建了 2 个按钮显示和隐藏。以及包含内容的 DIV。当我点击第一个按钮内容时 DIV 应该扩大宽度，它会隐藏第一个按钮，同时第二个按钮将变得可见。

当点击第二个按钮内容时 DIV 应该折叠它的宽度，第二个按钮将隐藏，而第一个按钮将变为可见。但它不起作用..帮助我。我对 jquery 了解不多，但我会使用它。

$(document).ready(function(){
    $("#seeall2").hide();

    $("#seeall").bind("click",
    function(){
        $("#speakers").animate({width: 880}, 1500);
        $("#seeall").hide(500);
        $("#seeall2").show(500);
    });

    $("#seeall2").bind("click",
    function(){
        $("#speakers").animate({width: 410}, 1500);
        $("#seeall").show(500);
        $("#seeall2").hide(500);
    });
});

这是我的 HTML:

<div id="speakers">

          <a href="" id="seeall">EXPAND</a>
          <a href="" id="seeall2">COLLAPSE</a>


            <div id="pics-wrap">
 content...
            </div>
</div>

请看这个http://jsfiddle.net/ajinkyax/mSjbV/ 它现在工作。 解决方案:我从 SCRIPT 标签中删除了额外的空间

Answer 1

工作正常:

$(document).ready(function () {

    $("#seeall2").hide();

    $("#seeall").bind("click", function () {
        $("#speakers").animate({
            width: 880
        }, 1500);
        $("#seeall").hide(500);
        $("#seeall2").show(500);
    });

    $("#seeall2").bind("click", function () {
        $("#speakers").animate({
            width: 410
        }, 1500);
        $("#seeall").show(500);
        $("#seeall2").hide(500);
    });
}); 

jsfiddle