jq中stop()方法停止不了css中animation

yechuan

314

发布于
2019-09-04

新手上路，请多包涵

问题描述

图片描述
我想切换外边小球转动速度，但实际效果在切换过程中并不会从当前位置切换速度，而是在环上的某个位置

自己尝试过的方法

我觉得是在切换速度时，原来的动画队列并没有停止，仍在运行，因此想用jq中stop()方法清除动画队列，但动画是那种死循环的旋转，根本无法清除，并没有效果。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<div class="contain">
        <div class="cir">               
        </div>
        <div class="bigcir">
                <div class="shanye" id="shanye"></div>
        </div>
        <button id="slow">低速</button>
        <button id="middle">中速</button>
        <button id="high">高速</button>
    </div>

 @keyframes zhuan{
            100%{
                transform: rotate(360deg)
            }
        }
 .shanye{
            animation:zhuan 4s infinite linear forwards;
            transform-origin:15px 115px;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            position: absolute;
            background:skyblue;
            left: calc(50% - 15px);
            top: -15px

        }

var slow = document.getElementById('slow')
    var middle = document.getElementById('middle')
    var high = document.getElementById('high')
    var shanye = document.getElementById('shanye')

    slow.onmouseenter=function(){
        $('#shanye').stop(true)
        shanye.style.animation='zhuan 8s infinite linear';
    }
    middle.onmouseenter=function(){
        $('#shanye').stop(true)
        shanye.style.animation = 'zhuan 4s infinite linear'
    }
    high.onmouseenter=function(){
        $('#shanye').stop(true)
        shanye.style.animation = 'zhuan 2s infinite linear'
    }

javascript css

阅读 3.4k

3 个回答

冯恒智

✓ 已被采纳

css动画和jquery动画基本上是两套东西，jquery的stop只能停止jquery的动画(至于为什么不能停你得了解js动画原理)
你的需求是没法用css动画实现的，控制不了那么细，得完全用js动画

查了下mdn，好像火狐上有些api可以控制css动画

以下代码仅火狐可用，且在about:config中开启dom.animations-api-getAnimations.enabled和dom.animations-api.timelines.enabled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    @keyframes zhuan {
        100% {
            transform: rotate(360deg)
        }
    }

    .shanye {
        animation: zhuan 4s infinite linear forwards;
        transform-origin: 15px 115px;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        position: absolute;
        background: skyblue;
        left: calc(50% - 15px);
        top: -15px

    }
</style>
<body>
<div class="contain">
    <div class="cir">
    </div>
    <div class="bigcir">
        <div class="shanye" id="shanye"></div>
    </div>
    <button id="slow">低速</button>
    <button id="middle">中速</button>
    <button id="high">高速</button>
</div>
<script>
    var slow = document.getElementById('slow');
    var middle = document.getElementById('middle');
    var high = document.getElementById('high');
    var shanye = document.getElementById('shanye');

    slow.onmouseenter = function () {
        const progress = shanye.getAnimations()[0].effect.getComputedTiming().progress;
        shanye.getAnimations()[0].effect.updateTiming({iterationStart: progress, duration: 8000});
        shanye.getAnimations()[0].startTime=document.timeline.currentTime
    };
    middle.onmouseenter = function () {
        const progress = shanye.getAnimations()[0].effect.getComputedTiming().progress;
        shanye.getAnimations()[0].effect.updateTiming({iterationStart: progress, duration: 4000});
        shanye.getAnimations()[0].startTime=document.timeline.currentTime
    };
    high.onmouseenter = function () {
        const progress = shanye.getAnimations()[0].effect.getComputedTiming().progress;
        shanye.getAnimations()[0].effect.updateTiming({iterationStart: progress, duration: 2000});
        shanye.getAnimations()[0].startTime=document.timeline.currentTime
    };
</script>
</body>
</html>

随便找了个js动画库写了个js动画，这个应该大部分浏览器都能正常展示(研究了下jquey动画没有想到简单方法做这个需求)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
</head>
<style>
    .shanye {
        /*animation: zhuan 4s infinite linear forwards;*/
        transform-origin: 15px 115px;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        position: absolute;
        background: skyblue;
        left: calc(50% - 15px);
        top: -15px

    }
</style>
<body>
<div class="contain">
    <div class="cir">
    </div>
    <div class="bigcir">
        <div class="shanye" id="shanye"></div>
    </div>
    <button id="slow">低速</button>
    <button id="middle">中速</button>
    <button id="high">高速</button>
</div>
<script>
    var slow = document.getElementById('slow');
    var middle = document.getElementById('middle');
    var high = document.getElementById('high');
    var shanye = document.getElementById('shanye');
    var myAnimation = TweenMax.to('.shanye', 2, {rotation: 360, repeat: Number.POSITIVE_INFINITY, ease: 'linear'});
    // console.log(test);
    slow.onmouseenter = function () {
        const progress = myAnimation.progress();
        myAnimation.duration(8).progress(progress);
    };
    middle.onmouseenter = function () {
        const progress = myAnimation.progress();
        myAnimation.duration(4).progress(progress);
    };
    high.onmouseenter = function () {
        const progress = myAnimation.progress();
        myAnimation.duration(2).progress(progress);
    };
</script>
</body>
</html>

鸿则

2.6k24685

发布于
2019-09-04

JQuery的stop函数只适用于JQuery动画，不适用于CSS动画。

君迹我心

5.1k41927

发布于
2019-09-04

jQuery.function.stop 貌似只能停止 jQuery 动画。
将 .shanye 的 style.animationPlayState 设为 "paused"，即可暂停正在进行的 CSS 关键帧动画。
但是速度切换的时候，动画衔接不是很流畅，似乎也是瞬间“折跃”到某个位置再开始，究其原因，不造。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

jq中stop()方法停止不了css中animation

问题描述

自己尝试过的方法

相关代码

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

为什么会出现CORS error？