如何在jquery传输中暂停和重新启动css3转换 [英] How to pause and restart a css3 transition in jquery transit

问题描述

我正在使用jquery transit来移动和元素。我想暂停动画并单击按钮继续动画。但是我无法弄清楚如何去做。

I'm using jquery transit to move and element. I want to pause the animation and continue it on click of a button. But i'm unable to figure out how to do it.

JSFiddle： http://jsfiddle.net/b4hwq/2/

JSFiddle : http://jsfiddle.net/b4hwq/2/

我确实尝试过

stop().transition({});

但它会抛出错误。

推荐答案

你大部分都在那里用 .stop（）我只是添加了一点逻辑来告诉它当它做什么时停止。

You were most of the way there with .stop() I just added a little logic to tell it what to do when it stops.

工作示例

Working Example

$('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"
    }
});

这篇关于如何在jquery传输中暂停和重新启动css3转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！