为什么我的脚本在隐藏元素时会有延迟？

Question

我正在尝试制作某种标签 div。我有 4 个按钮，默认情况下我显示第一个 div。现在我试图隐藏单击另一个时打开的 div 。尝试了不同的想法，但 none 似乎有效。我将按钮和内容分成 2 divs:

我的 HTML 片段：

<div class="button wrapper">
   <button class="btn btn-1" rel="btn-1" href="">Horeca</button>
   <button class="btn btn-2" rel="btn-2" href="">Winkel</button>
</div>
<div class="content-wrapper">
   <div class="mycontent-1" style="display: block;">
      <h1>Horeca</h1>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ratione, ullam?
         Aspernatur deserunt ducimus ex explicabo iste maiores molestiae odio pariatur rem vero.
         Distinctio dolor error placeat quos sunt voluptatum!
      </p>
   </div>
   <div class="mycontent-2" style="display: none;">
     <h1>Winkel</h1>
     <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ratione, ullam?
        Aspernatur deserunt ducimus ex explicabo iste maiores molestiae odio pariatur rem vero.
        Distinctio dolor error placeat quos sunt voluptatum!
     </p>
</div>

jquery 片段：

$(document).ready(function() {
    $(".btn-1").click(function(){
      $(".mycontent-1").fadeToggle(function(){
         $(this).siblings().hide();
            });
      });
    $(".btn-2").click(function(){
      $(".mycontent-2").fadeToggle(function(){
         $(this).siblings().hide();
            });
      });
});

出于某种原因，本应隐藏的 div 在消失之前会在 DOM 中停留几毫秒。我想让它顺利进入下一个div。因此，当第一个 div 完成淡入淡出时，我想开始淡入被单击按钮的内容。我应该做一些成功的功能来完成这项工作吗？

Answer 1

我认为您将 fadeToggle 对兄弟姐妹操作的事件复杂化了。试试这个 (fiddle):

$(document).ready(function() {
    $(".btn-1").click(function() {
      $(".mycontent-1").siblings().hide();
      $(".mycontent-1").fadeIn();
    });
    $(".btn-2").click(function() {
      $(".mycontent-2").siblings().hide();
      $(".mycontent-2").fadeIn();
    });
});

因此，对于每次单击按钮，我们都会隐藏兄弟姐妹并淡入所需的 div。

您也可以更简洁一点，只使用一个使用选择器通配符的事件，检查按钮的编号，然后对正确的 div 编号 (fiddle) 进行操作。这将适用于多个遵循您的命名约定的 buttons/divs。

$(document).ready(function() {
    // on click of a button with "rel" attribute that starts with "btn-"
    $("[rel^=btn-]").click(function() {
      var n = $(this).attr("rel").split("-")[1]  // get the number
      $(`.mycontent-${n}`).siblings().hide();
      $(`.mycontent-${n}`).fadeIn();
    });
});

Answer 2

首先，伙计，你缺少一个 div 关闭标记来关闭我的 class="mycontent-2" 秒数 div。其次，您只需要隐藏 div，不要担心它的内容，因为它们已经包含在其中并且会随之隐藏。第三，在尝试显示另一个元素之前，您需要隐藏所有其他元素。通常在您的 jquery 代码中尝试这样做：

$(document).ready(function() {
    $(".btn-1").click(function(){
        $(".mycontent-2").hide("slow", function(){
            $(".mycontent-1").show();
        });
    });
    $(".btn-2").click(function(){
    $(".mycontent-1").hide("slow", function(){
            $(".mycontent-2").show();
        });
    });
});

为什么我的脚本在隐藏元素时会有延迟？

Why is there a delay in the hiding of an element by my script?

jquery

fade