不完美的jQuery动画时间

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>

我是JQuery的新手。在上面的代码中，单击并逐渐淡出的DIV增量内部的数字。我希望它能起作用，使现有数字先消失，然后在此时出现下一个数字，此处，此处的数字首先更改，然后逐渐淡出，然后淡出在，这不是我希望它能正常工作的方式。请运行摘要以查看问题。我的代码中有什么错或缺少？任何帮助将不胜感激。

这是因为它需要fadeOut 500毫秒，但是count的增量和分配立即发生。您可以使用fadeOut的回调 complete 来实现所需的目标：

$("#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>

尝试这个您需要增加淡出的回调，这意味着动画完成

时会增加

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>

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

" jQuery Chaning"https://www.w3schools.com/jquery/jquery_chaining.asp

相关内容

最新更新

热门标签：