如何在 jquery transit 中暂停和重新启动 css3 转换
How to pause and restart a css3 transition in jquery transit
我正在使用jquery transit来移动和元素。我想暂停动画并在单击按钮时继续播放。但是我不知道该怎么做。
JSFiddle : http://jsfiddle.net/b4hwq/2/
我确实试过
stop().transition({});
但它抛出了一个错误。
您可以使用clearQueue()
停止动画
clearQueue() : 停止队列中剩余的函数
js小提琴在这里
.HTML
<div class="box"></div>
<button id="restartTransition">Click Me</button>
.CSS
.box{
opacity: 0.8;
position: absolute;
left: 0;
top: 5%;
background: #505060;
border-radius: 1px;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
margin: -16px 0 0 -16px;
width: 32px;
height: 32px;
z-index: 2;
}
jQuery
$(document).ready(function(){
$("#restartTransition").on("click", function(){
$('.box').clearQueue().transition({ x: '0px' },10);
$('.box').transition({ x: '350px' },5000);
});
});
我已经使用传输库中的完整功能更新了小提琴:
$('.box').transition({
x: '350px',
duration: 5000,
complete: function() {
alert("complete!");
}
});
斯菲德尔
即使使用 clearQueue() 或 stop() 仍然执行完整的函数
你大部分时间都在那里.stop()
我只是添加了一些逻辑来告诉它停止时该怎么做。
工作示例
$('button').click(function () {
if (!$('.box').hasClass('stop')) { // if the box does not have class "stop"
$('.box').stop().transition({ // stop the transition
x: $('.box').offset().left + $('.box').width() / 2 // where the box should be when it stops
}, 1).addClass('stop'); // simple add class for easy button control
} else { // if the box has class "stop"
$('.box').transition({
x: '350px'
}, 5000).removeClass('stop'); // continue with regularly scheduled programming then remove "stop"
}
});
相关文章:
- 当我在重新启动cordova应用程序后尝试添加更多数据时,lokijs会丢失数据库和收集中的数据
- 重新启动jquery脚本后,角度停止工作
- Chrome内容脚本制作cookie;chrome重新启动时,cookie会被删除.如何使其稳定
- preventDefault之后的重新启动事件
- WebStorm,使用Node Supervisor(因此不必在每次代码更改后重新启动)
- 重新启动游戏jQuery功能不工作
- Web服务器意外退出,正在重新启动新实例
- 在变量中保存值的最佳方法是在应用程序关闭后使用,然后使用apachecordova在android中重新启动
- 使用带有onclick事件的Javascript启动CSS3动画
- 重新启动画布 JavaScript
- 事件侦听器,用于完全关闭后重新启动的应用程序
- Node SocketIO以编程方式强制在损坏的套接字上重新启动
- 服务器重新启动后javascript不工作
- 当滚动到指定的位置时,启动功能,如何重置它并重新启动,如果我们再次回到这个位置
- Gulp Concat+Browsesync重新启动
- 在 javaScript 中重新启动 setInterval
- 如何为Sails.js创建启动/停止/重新启动Linux服务
- 停止并重新启动 CSS3 动画
- 如何在 jquery transit 中暂停和重新启动 css3 转换
- CSS3关键帧动画点击(与addClass).如何重新启动CSS3动画添加css类