在JavaScript (Jquery)中为变化的元素制作动画

Animate contents of a changing element in JavaScript (Jquery)

本文关键字：元素动画变化 JavaScript Jquery 更新时间：2023-09-26

下面代码中的'h1'计数从0到无穷大。我如何动画每一个数字，使其淡入淡出。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h1 id="the_numbers">0</h1>
<script>
var output = $('h1');
var isPaused = false;
var time = 0;
var t = window.setInterval(function() {
if(!isPaused) {
time++;
output.text(time);
}
}, 1000);

$('.pause').on('click', function(e) {
e.preventDefault();
isPaused = true;
});
$('.play').on('click', function(e) {
e.preventDefault();
isPaused = false;
});
</script>

使用jquery的fadeIn和fadeOut函数

var output = $('h1');
var isPaused = false;
var time = 0;
var t = window.setInterval(function() {
  if (!isPaused) {
    time++;
    output.fadeOut(500, function() {
      output.text(time);
    });
    output.fadeIn(500)
  }
}, 1000);
$('.pause').on('click', function(e) {
  e.preventDefault();
  isPaused = true;
});
$('.play').on('click', function(e) {
  e.preventDefault();
  isPaused = false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h1 id="the_numbers">0</h1>

Try this:

$(document).ready(function(){
  
  var timer;
  var which;
  var number = 0;
  
  move();
  
  $("input[type=radio]").on("change",function(){
    move();
    $(".fa-play").css({color:"skyblue"});
    $(".fa-pause").css({color:"red"});
   })
  
  $(".fa-pause").on("click",function(){
    $(this).css({color:"skyblue"});
    $(".fa-play").css({color:"red"});
    clearInterval(timer);
   })
  
  $(".fa-play").on("click",function(){
    move();
    $(this).css({color:"skyblue"});
    $(".fa-pause").css({color:"red"});
   })
  
  function move() {
    if(timer)
      clearInterval(timer);
    
    which = $("input[type=radio]:checked").attr("class");
    
    timer = setInterval(function(){
      
      number = parseFloat($(".number").text()) + 1;
      
      if (which == "t1") {
        $(".number").hide(750,function(){
          $(this).show(100).text(number);
          })
        }
      
      else if (which == "t2") {
        $(".number").fadeOut(750,function(){
          $(this).fadeIn(100).text(number);
          })
        }
      
      else {
        $(".number").slideUp(750,function(){
          $(this).slideDown(100).text(number);
          })
        }
      },2000)
    }
 })

ul {
  text-align: center;
  border: 1px solid skyblue;
  display: block;
  width:500px;
  height: 200px;
  margin: 0 auto;
}
li {
  display: inline-block;
}
h1 {
  display: inline;
  color: #fff;
  text-shadow: 0px 0px 5px #000;
  font-size: 50px;
}
div {
  width: 100%;
}
.x {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}
.fa {
  margin: 0 0 10px 10px;
  cursor: pointer;
}
.fa-play {
  color: skyblue;
} 
.fa-pause {
  color: red;
}

 <ul>
   <div>
     <div class="x"><h1 class="number">0</h1></div>
     <li class="fa fa-pause"></li>
     <li class="fa fa-play"></li>
     </div>
   <li>
     <input type="radio" name="style" class="t1" checked>Show/hide
   </li>
   <li>
     <input type="radio" name="style" class="t2">Fadein/Fadeout
   </li>
   <li>
     <input type="radio" name="style" class="t3">SlideUp/SlideDown
   </li>
</ul>   
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

你可以做一个css技巧来节省昂贵的fadeIn/fadeOut开销。

这里有一个小提琴:https://jsfiddle.net/e_neko/8nLox63t/

css:

h1 {
  transition: opacity 400ms cubic-bezier(.5,-20,.5,-20);
  opacity: 1;
}
h1.fade {
  opacity: 0.9;
  transition: opacity 400ms cubic-bezier(.5,20,.5,20);
}

脚本:

var t = window.setInterval(function() {
if(!isPaused) {
    time++;
    output.toggleClass('fade');
    setTimeout(function(){
        output.text(time);
      }, 200);
    }
}, 1000);