您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

在实际位置/状态上中断/停止CSS3过渡

在实际位置/状态上中断/停止CSS3过渡

无需深入了解插件,只需css3animate使用当前( 计算的 )所需道具的值来重新使用您的方法,并将持续时间设置为0(插件中为1,因为您使用!speed来使用认值。

所以在示例中使用

var $animated = $('div');
$animated.css3animate({"height": $animated.css('height'), "width": $animated.css('width')}, 1);

会成功的

当然,您应该针对正在使用的当前属性自动执行此操作。如果在启动动画时使用计时器,而在有人使用stop方法时使用计时器,则还可以模拟暂停/继续功能

您可以将cssObject传递给动画的内容存储到data元素的,并在它们的停止循环上存储它们以获取当前值。

因此,在您的animation方法中,您可以$obj.data('animationCss', cssObject);并且在stop方法

stop : function( clearQueue,jumpToEnd ){
    return this.each(function(){
        var $that = $(this);
        var currentCss = {};
        var animationCss = $that.data('animationCss');
        for (var prop in animationCss)
            currentCss[prop] = $that.css(prop);

        if (jumpToEnd)
        {
            animation($that,currentCss,1, function(){animation($that,animationCss,1)});
        }
        else
        {
            animation($that,currentCss,1);
        }
       console.log("stop was called");
    });
   }
CSS 2022/1/1 18:21:05 有559人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶