jQuery对象数组

问题描述 投票：1回答：2

我有以下三个范围：

dot1 = $('#loading-dots-1');
dot1.delay(500, function() {
  dot1.show(500);
});
@import url('https://fonts.googleapis.com/css?family=Montserrat:300i,400,600&display=swap');

.main-text {
  width: calc(100%);
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 6vw;
  color: #000;
  text-align: center;
}

.loading-dots {
  opacity: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <!--Here's my doubt-->
  <div id="preloader-text" class="main-text">
    <p>Loading
      <span id="loading-dots-1" class="loading-dots">.</span>
      <span id="loading-dots-2" class="loading-dots">.</span>
      <span id="loading-dots-3" class="loading-dots">.</span>
    </p>
  </div>

  <!--Don't mind me, I'm just jQuery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</body>

</html>

看到了吗？ jQuery没有.show(500)元素，因为我使用了dot1。如果我直接使用了以下内容，它将显示所需的输出（在“加载”之后立即显示点）。

$('#loading-dots-1').delay(500, function() {
  dot1.show(500);
});

我将如何使用变量dot1执行相同的操作？

jquery html css arrays
2个回答
1
投票

几件事。 delay()功能会更改显示属性，而不是不透明度，因此必须在默认状态下为点赋予display:none。其次，delay()不使用回调函数作为参数。相反，您需要将show()链接到它。

let dot1 = $('#loading-dots-1');
dot1.delay(500).show(500);
@import url('https://fonts.googleapis.com/css?family=Montserrat:300i,400,600&display=swap');

.main-text {
  width: calc(100%);
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 6vw;
  color: #000;
  text-align: center;
}

.loading-dots {
  display:none;
}
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <!--Here's my doubt-->
  <div id="preloader-text" class="main-text">
    <p>Loading
      <span id="loading-dots-1" class="loading-dots">.</span>
      <span id="loading-dots-2" class="loading-dots">.</span>
      <span id="loading-dots-3" class="loading-dots">.</span>
    </p>
  </div>

  <!--Don't mind me, I'm just jQuery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</body>

</html>
1
投票

首先，由于loading-dots方法更改了元素的显示属性，因此您需要更改.show()类以使用显示。

第二.delay()函数不接受函数作为第二个参数（它是字符串类型）。您可以像这样简单地链接jquery效果：$('#loading-dots-1').delay(500).show(500);

下面有一些修改后的代码，希望它能回答您的问题。

const dot1 = $('#loading-dots-1');
dot1.delay(500).show(500);
const dot2 = $('#loading-dots-2');
dot2.delay(1000).show(500);
const dot3 = $('#loading-dots-3');
dot3.delay(1500).show(500);
@import url('https://fonts.googleapis.com/css?family=Montserrat:300i,400,600&display=swap');

.main-text {
  width: calc(100%);
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 6vw;
  color: #000;
  text-align: center;
}

.loading-dots {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <!--Here's my doubt-->
  <div id="preloader-text" class="main-text">
    <p>Loading
      <span id="loading-dots-1" class="loading-dots">.</span>
      <span id="loading-dots-2" class="loading-dots">.</span>
      <span id="loading-dots-3" class="loading-dots">.</span>
    </p>
  </div>

  <!--Don't mind me, I'm just jQuery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.