JavaScript (Jquery)에서 변경 요소의 내용을 애니메이션화하려면 아래 코드에서 'h1'은 0에서 무한대까지 계산됩니다.

Question

페이드 인 및 페이드 아웃되도록 모든 단일 번호를 어떻게 애니메이트합니까?

<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

당신은 비용이 많이 드는 fadeIn/페이드 아웃 오버 헤드를 저장하는 CSS를 트릭을 할 수 있습니다. 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>

를 여기

은 바이올린의