' 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>
答案 0 :(得分: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>
答案 1 :(得分:1)
试试这个:
$(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>
答案 2 :(得分:0)
你可以做一个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);