2
我尝试暂停/恢复文本上的过渡动画。对于类似的问题,我尝试了很多解决方案,但仍然没有成功。JavaScript暂停并恢复文本上的过渡动画
我想暂停'颜色效果',当点击暂停按钮,当我点击恢复按钮'颜色效果'将完成作业着色整个文本基于休息时间。
这是我的代码。
$(document).ready(function(){
$('#start').on('click', function() {
$(this).text('Resume');
$(this).attr('disabled',true);
$('span').addClass('active');
$('span').dequeue();
});
$("#stop").click(function() {
$('#start').attr('disabled',false);
$('#start').clearQueue();
$("span").stop();
/*
* it similiar like below,
* but still not perfect.
* when the duration of background-position-x has finished,
* the transition start again. and yet still not perfect
*/
/*$('span').animate({
'background-position-x': '10%',
'background-position-y': '20%'
}, 10000, 'linear');*/
});
})
body {
\t \t background: #ccc;
\t }
\t span {
\t height: 25px;
\t background-size: 200% 100%;
\t background-image: linear-gradient(to right, orange 50%, white 50%), linear-gradient(to right, transparent 50%, transparent 50%);
\t text-indent: 28px;
\t font-size: 30px;
\t background-size: 200% 100%;
\t background-repeat: no-repeat;
\t background-position: 100% top, 100% top;
\t -webkit-background-clip: text, border-box;
\t background-clip: text, border-box;
\t color: transparent;
\t }
\t .active {
\t \t background-position: 0% top, 0% top;
\t transition: background-position 10s;
\t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span>Lorem ipsum dolor sit amet</span></p>
<button id="start">Start</button>
<button id="stop">Pause</button>
注:我知道有这么多“的JavaScript暂停/恢复”问题,我已经尝试用我的情况下实现的,但还是没有成功。
Wow excellent ..!非常感谢你......我在另一个解决方案上使用了动画播放状态,但不工作。现在我知道如何使用它。非常感谢。 – fandiahm