CODEWITHSUNDEEP
javascriptjquerycss
user7896971
user7896971

Reputation:

Imperfect Jquery animations timings

var count = 0;
$(document).ready(function() {
  $("div").on("click", function() {
    $("#test").fadeOut(500);
    count++;
    $("#test").fadeIn(500);
    document.getElementById("test").innerHTML = count;
  });
});
div {
  background-color: gold;
  border: 2px solid goldenrod;
  border-radius: 7px;
  text-align: center;
  vertical-align: middle;
  font-family: Arial;
  font-size: 35px;
  width: 100px;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div><span id="test">0</span></div>
</body>
</html>

I am new to Jquery. In the above code, the number inside the div increments on clicking and fades out and in. I want it to work such that the existing number disappears first and then the next number appears while, here, the number first changes and then fades out and in, which is not how I want it to work. Please run the snippet to see the problem. What is wrong or missing in my code? Any help would be appreciated.

Upvotes: 1

Views: 34

Answers (3)

Osama
Osama

Reputation: 3030

var count = 0;
$(document).ready(function() {
$("div").on("click", function() {
count++;
  $("#test").fadeOut(500).$("test").text(count).fadeIn(500);
});
});

"JQuery Chaining" https://www.w3schools.com/jquery/jquery_chaining.asp

Upvotes: 0

ibrahim mahrir
ibrahim mahrir

Reputation: 31712

It's because it takes the fadeOut 500 ms but the increment of count and the assignment happens right away. You can use the callback complete of fadeOut to achieve what you need:

$("#test").fadeOut(500, function() { // the function will be called when the fadeOut is completed
    count++;                         // increment count
    this.textContent = count;        // assign it to this element (#test) textContent
}).fadeIn(500);                      // then fadeIn


var count = 0;
$(document).ready(function() {
  $("div").on("click", function() {
    $("#test").fadeOut(500, function() {
        count++;
        this.textContent = count;
    }).fadeIn(500);
  });
});
div {
  background-color: gold;
  border: 2px solid goldenrod;
  border-radius: 7px;
  text-align: center;
  vertical-align: middle;
  font-family: Arial;
  font-size: 35px;
  width: 100px;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div><span id="test">0</span></div>
</body>
</html>

Upvotes: 3

Mostafa El-Messiry
Mostafa El-Messiry

Reputation: 380

Try this you need to increment in callback of fading out, meaning increment when animation is complete

var count = 0;
$(document).ready(function() {
  $("div").on("click", function() {
    $("#test").fadeOut(500, function(){
      count++;
      document.getElementById("test").innerHTML = count;
      }
    );
  
    $("#test").fadeIn(500);
    
  });
});
div {
  background-color: gold;
  border: 2px solid goldenrod;
  border-radius: 7px;
  text-align: center;
  vertical-align: middle;
  font-family: Arial;
  font-size: 35px;
  width: 100px;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div><span id="test">0</span></div>
</body>
</html>

Upvotes: 0

Related Questions