Анимация содержимого изменяющегося элемента в JavaScript (JQuery)

Question

'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> 

Answer 1

Использование 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>

Answer 2

Вы можете сделать CSS трюк, который позволит сэкономить дорогостоящие накладные расходы FadeIn/Затухание.

Вот скрипку: 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); 

Answer 3

Попробуйте это:

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