CODEWITHSUNDEEP
jqueryhtmlcssarrays
kichapps
kichapps

Reputation: 59

Variable equal to a jQuery object

I have 3 spans as follows:

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>

See that? jQuery did not .show(500) the element because I used dot1. Had I directly used the following, it will show the required output (show the dot immediately following "Loading").

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

How will I go about using the variable dot1 to do the same?

Upvotes: 1

Views: 86

Answers (3)

Alen.Toma
Alen.Toma

Reputation: 4870

I would use settimeout togather with show. And also your first example should work, it did not work becouse you have opacity: 0; it should be display:none instead See below

var dots = $(".loading-dots")
var index = -1;
function loading(){

if (index == dots.length -1)
   {
     index=0;
     dots.hide();
   }else index++;
   $(dots[index]).show(500, function(){
    setTimeout(loading,501)
   });
  

}
loading()
@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;
}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--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-->

Upvotes: 0

user1403588
user1403588

Reputation: 804

First, you need to change loading-dots class to use display since .show() method changes display property of an element.

Second .delay() function does not accept function as a second parameter (it is of type string). You can simply chain jquery effects like this: $('#loading-dots-1').delay(500).show(500);

A little modified code is below, hope that this answers your question.

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>

Upvotes: 1

symlink
symlink

Reputation: 12218

A couple things. The delay() func changes the display property, not opacity, so you have to give the dots a display:none in their default state. Secondly, delay() doesn't take a callback func as an argument. Instead, you need to chain show() to it.

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>

Upvotes: 1

Related Questions