Javascript用动画显示和隐藏div

Question

我不是唯一有这个问题的人。我尝试了很多我在这个论坛上找到的解决方案，但没有任何成功。我做错了什么？

我想要实现的目标： 一旦div打开并且用户点击另一个div，该div以相同的动画打开，但首先另一个div以反向动画关闭。我希望这个解释清楚。先谢谢！

继承我的代码：（HTML）

    $('a').click(function () {
        var itemID = $(this).attr('href');
        $(itemID).slideToggle({
          direction: "up"
        }, 300);
        return false;
      });

#click-01{
      background: #fd6569;
      color: #fff;
      font-size: 16px;
      line-height: 22px;
      margin:0;
      padding: 20px;
    }
    #click-02{
      background: #fda988;
      color: #fff;
      font-size: 16px;
      line-height: 22px;
      margin:0;
      padding: 20px;
    }
    #click-03{
      background: #87cba0;
      color: #fff;
      font-size: 16px;
      line-height: 22px;
      margin:0;
      padding: 20px;
    }
    .close{
      display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <a href="#click-01">01</a>
    <a href="#click-02">02</a>
    <a href="#click-03">03</a>
      <div id="click-01" class="close">
        <p>
          item-01
        </p>
      </div>
      <div id="click-02" class="close">
        <p>
          item-02
        </p>
      </div>
      <div id="click-03" class="close">
        <p>
          item-03
        </p>
      </div>

Answer 1

您可以使用jQuery的not函数来实现此目的。另外，请使用slideToggle和hide。

，而不是使用show

我修改了部分代码段，并在下方显示了一个可用的演示。

＆＃13;

＆＃13;

        $('a').click(function () {
            var itemID = $(this).attr('href');
            $( "div" ).not( itemID ).hide({
              direction: "up"
            }, 300);
            $(itemID).show({
              direction: "down"
            }, 300);
            return false;
          });

＆＃13;

#click-01{
          background: #fd6569;
          color: #fff;
          font-size: 16px;
          line-height: 22px;
          margin:0;
          padding: 20px;
        }
        #click-02{
          background: #fda988;
          color: #fff;
          font-size: 16px;
          line-height: 22px;
          margin:0;
          padding: 20px;
        }
        #click-03{
          background: #87cba0;
          color: #fff;
          font-size: 16px;
          line-height: 22px;
          margin:0;
          padding: 20px;
        }
        .close{
          display: none;
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <a href="#click-01">01</a>
        <a href="#click-02">02</a>
        <a href="#click-03">03</a>
          <div id="click-01" class="close">
            <p>
              item-01
            </p>
          </div>
          <div id="click-02" class="close">
            <p>
              item-02
            </p>
          </div>
          <div id="click-03" class="close">
            <p>
              item-03
            </p>
          </div>

＆＃13;

＆＃13;

＆＃13;