我如何在每個內部元素中使用.delay（x）.animate（{'opacity'：'1'}，x）;淡化為0的內部元素？

Question

我試圖淡入這個div中的每個元素作為示例。 問題是我不知道為什么動畫僅在父元素的內部元素中不會改變。

我使用了以下jQuery，但不起作用（也嘗試了其他方法）： jQuery('h1#hideme.welcome__title').delay(100).animate({'opacity':'1'},400); or jQuery('.welcome__title').delay(100).animate({'opacity':'1'},400); or jQuery('#hideme').delay(100).animate({'opacity':'1'},400); jQuery('h1#hideme.welcome__title').delay(100).animate({'opacity':'1'},400); or jQuery('.welcome__title').delay(100).animate({'opacity':'1'},400); or jQuery('#hideme').delay(100).animate({'opacity':'1'},400);

我想專門使用以上幾行。

<div class="section_one">
    <div class="welcome_wrapper">
        <div id="" class="welcome__container">
            <div class="welcome">
                <h1  id="hideme" class="welcome__title">Welcome to Dryft</h1>
                <div class="welcome__info">
                    <p >A Boston waterfront restaurant destination with panoramic views of the harbor. Our menu highlights
                                    many
                                    exciting flavors in some of our most classic New England dishes with a focus on fresh seafood and
                                    local
                                    ingredients.</p>
                </div>
                <button class="btn-theme">
                                Book Event<i class="fas fa-arrow-right fa-xs"></i>
                </button>
            </div>
        </div>
    </div>
</div>

我的CSS：

#hideme {

  opacity: 0;
}

Answer 1

它似乎工作正常。 我為您編輯了一下內容，以查看進展情況。 我將hideme從ID更改為class ，並將其添加到將受到影響的3個elements （標題，文本和按鈕）中。 所以我設置了jQuery來制作它。

HTML：

<div class="section_one">
  <div class="welcome_wrapper">
    <div id="" class="welcome__container">
      <div class="welcome">
        <h1 class="welcome__title hideme">Welcome to Dryft</h1>
        <div class="welcome__info hideme">
          <p >A Boston waterfront restaurant destination with panoramic views of the harbor. Our menu highlights
            many
            exciting flavors in some of our most classic New England dishes with a focus on fresh seafood and
            local
            ingredients.
          </p>
        </div>
        <button class="btn-theme hideme">
        Book Event<i class="fas fa-arrow-right fa-xs"></i>
        </button>
      </div>
    </div>
  </div>
</div>

CSS：

.hideme {
  opacity: 0;
}

jQuery的：

$('h1.hideme').delay(100).animate({'opacity':'1'},400);
$('.welcome__info.hideme').delay(400).animate({'opacity':'1'},400);
$('.btn-theme.hideme').delay(700).animate({'opacity':'1'},400);