Question

我有两个部分叫做.about-us和.price-list。使用2个按钮激活它们.prices和.about-us-btn。默认情况下，这两个部分都隐藏了JQuery并且每个部分都有一个.slideToggle事件，如果有一个可见，如果我单击其他按钮，它会向上滑动。

现在我想，他们可以做一个fadeOut事件而不是向后滑动。它可以工作，但只有首先看到.price-list，然后点击.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);
    });

});

Answer 1

看起来你正在尝试创建jQuery Accordion效果。以下链接可以帮助您。

http://docs.jquery.com/UI/Accordion

Answer 2

而不是.slideToggle()，您应该在这里明确使用.slideUp()和.slideDown()（因为您不知道他们最初处于什么状态，如下所示：

$(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);
  });
});

或者，如果你想在幻灯片发生之前完全淡出每一个，请使用.fadeOut()回调，如下所示：

$(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);
    });
  });
});

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

2 个答案: