JQuery-如何淡出而不是向上滑动？

我有两个部分叫做。关于我们和。价格表。有两个按钮可以激活它们。价格和。关于我们btn。这两个部分在JQuery中默认都是隐藏的，并且每个部分都有一个.slideToggle事件，但是如果其中一个是可见的，那么如果我单击另一个按钮，它就会向上滑动

现在我想，他们可以做一个淡出事件，而不是向后滑动。它可以工作，但前提是先显示.price列表，然后单击.prices。（两个部分位于同一位置，但单击按钮时只有一个部分可见）。如果.about us首先可见，那么如果我单击.prices按钮，.about us将滑动而不是消失

无论如何，我会的。希望你能理解并帮助我！。这是我的JQuery代码：

$(document).ready(function(e){
  // Price-list & About-us are hidden by Javascript
  $("aside.price-list, aside.about-us").hide();
  // Create a slide for the price-list
    $("button.prices").click(function(){
      $("aside.about-us").fadeOut(300);
      $("aside.price-list").slideToggle(300);
  }); 
  // Create a slide for the about-us
    $("button.about-btn").click(function(e){
        $("aside.about-us").slideToggle(300);
        $("aside.price-list").fadeOut(300);
    });

});

---

看起来您正在尝试创建jQuery手风琴效果。下面的链接应该对您有所帮助

您应该在此处明确使用和（因为您不知道它们最初处于什么状态，如下所示）：

$(function() {
  $("aside.price-list, aside.about-us").hide();
  $("button.prices").click(function() {
    $("aside.about-us").fadeOut(300);
    $("aside.price-list").slideDown(300);
  }); 
  $("button.about-btn").click(function() {
    $("aside.about-us").slideDown(300);
    $("aside.price-list").fadeOut(300);
  });
});

$(function() {
  $("aside.price-list, aside.about-us").hide();
  $("button.prices").click(function() {
    $("aside.about-us").fadeOut(300, function() {
      $("aside.price-list").slideDown(300);
    });
  }); 
  $("button.about-btn").click(function() {
    $("aside.price-list").fadeOut(300, function() {
      $("aside.about-us").slideDown(300);
    });
  });
});

或者，如果您想在另一张幻灯片出现之前完全淡出，请使用回调，如下所示：

$(function() {
  $("aside.price-list, aside.about-us").hide();
  $("button.prices").click(function() {
    $("aside.about-us").fadeOut(300);
    $("aside.price-list").slideDown(300);
  }); 
  $("button.about-btn").click(function() {
    $("aside.about-us").slideDown(300);
    $("aside.price-list").fadeOut(300);
  });
});

$(function() {
  $("aside.price-list, aside.about-us").hide();
  $("button.prices").click(function() {
    $("aside.about-us").fadeOut(300, function() {
      $("aside.price-list").slideDown(300);
    });
  }); 
  $("button.about-btn").click(function() {
    $("aside.price-list").fadeOut(300, function() {
      $("aside.about-us").slideDown(300);
    });
  });
});