Question

我已经设置了两组循环函数来垂直或水平地为svg设置动画。我想切换每次点击运行的动画，因此我需要停止/终止当前触发的功能并调用替代“Up”功能。我该怎么做呢？任何帮助将不胜感激

var Rightscale = {
    svgEl: $('#right').find('svg'),
    svgH: $('#right').find('.scale').height(),
    svgW: $('#right').find('.scale').width(),
    cntH: $('#right').height(),
    cntW: $('#right').width(),

    init: function() {
        Rightscale.svgEl.on("click", function() {
            Rightscale.verticalUp(Rightscale.svgEl)
        });
    },
    verticalUp: function($elt) {
        var scaleH = Rightscale.cntH / Rightscale.svgH;
        $elt.css('transform', 'scaleY(' + scaleH + ')')
        setTimeout(function(){
            Rightscale.verticalDown($elt);
        }, 5000);
        
    },
    verticalDown: function($elt) {
        $elt.css('transform', 'scaleY(1)')
        setTimeout(function(){
            Rightscale.verticalUp($elt);
        }, 5000);
    },
    horizontalUp: function($elt) {
        var scaleW = Rightscale.cntW / Rightscale.svgW;
        $elt.css('transform', 'scaleX(' + scaleW + ')')
        setTimeout(function(){
            Rightscale.horizontalDown($elt);
        }, 5000);
    },
    horizontalDown: function($elt) {
        $elt.css('transform', 'scaleX(1)')
        setTimeout(function(){
            Rightscale.horizontalUp($elt);
        }, 5000);

    }
}

$(document).ready(function() {
    Rightscale.init();
});

#right {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scale {
    font-size: 0px;
    width: 40%;
}
svg {
    transition: transform 5000ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="right">
<div class="scale">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 392 132" style="enable-background:new 0 0 392 132;" xml:space="preserve">
    <g>
        <path d="M81.2,117.5c-6.6,8.8-17.5,13-34.8,13c-17.7,0-28.6-4.3-35.2-13.9c-5.3-7.5-7.7-17.1-8.5-32.4c-0.2-4.3-0.4-9.8-0.4-16.6
            c0-18.4,0.9-27.3,3.6-37.3C7.2,25.5,9.2,21,11.7,17C18.5,6.7,29,2,45.6,2c17.3,0,27.9,3.8,34.6,12.4c7.9,10.2,10.4,22,10.4,51.2
            C90.6,93.4,87.9,108.1,81.2,117.5z M57.4,66.1l-0.2-16.4C56.9,24,56.1,21.9,46.9,21.9c-6.2,0-9.4,3.4-10.2,10.9
            c-0.6,7.5-0.9,21.8-0.9,38.4c0,13,0.2,25,0.8,29.4c0.8,6.2,4.1,9.4,10,9.4c5.6,0,9-3.2,9.8-9.6c0.6-4.5,1.1-19.2,1.1-31.1V66.1z"/>
</g>
    </svg>
</div>
</div>

Answer 1

您需要一个要停止的TimeOut句柄：

    verticalDownTimeout = setTimeout(function(){
        Rightscale.verticalDown($elt);
    }, 5000);

你可以用

来阻止它

clearTimeout(verticalDownTimeout);

我会把细节留给你，我相信你可以处理它。

Answer 2

您正在将事件侦听器附加到init（）函数内的元素。您需要做的是删除现有的事件侦听器并添加另一个。因此，首先您需要将其作为匿名函数传递，而不是作为命名回调传递，以便您可以使用.off方法将其删除。

您需要将事件侦听器转换为可以接受元素并返回函数的闭包：

verticalUp: function($elt) {
    return function() {
        var scaleH = Rightscale.cntH / Rightscale.svgH;
        $elt.css('transform', 'scaleY(' + scaleH + ')')
        setTimeout(function(){
            Rightscale.verticalDown($elt);
        }, 5000);
    }        
}

然后你可以像这样添加事件监听器：

init: function() {
    Rightscale.svgEl.on("click", Rightscale.verticalUp(Rightscale.svgEl));
}

然后您可以添加用于删除侦听器的逻辑，但语法如下：

Rightscale.svgEl.off("click", Rightscale.verticalUp(Rightscale.svgEl));
Rightscale.svgEl.on("click", Rightscale.verticalDown(Rightscale.svgEl));

Answer 3

我会使用关键帧，这样垂直向上不需要调用垂直向下。并且onclick我会将svg的当前关键帧从动画垂直变为动画水平。如果您不想重构，那么jquery芬兰语方法很有用。

＆＃13;

findOne(..)

＆＃13;

state: true,

init: function() {
        var scaleH = Rightscale.cntH / Rightscale.svgH;
        $.keyframe.define([{
            name: 'vertical',
            '0%':   {'transform', 'scaleY(1)'},
            '50%': {transform:'scaleY(' + scaleH + ')')},
            '100%': {'transform', 'scaleY(1)'}
        }]);
        
        var scaleW = Rightscale.cntW / Rightscale.svgW;
        $.keyframe.define([{
            name: 'horizontal',
            '0%':   {'transform', 'scaleX(1)'},
            '50%': {transform:'scaleX(' + scaleW + ')')},
            '100%': {'transform', 'scaleX(1)'}
        }]);
        
        
        Rightscale.svgEl.on("click", function() {
            //stop the current animation and any future animation que 
            //https://api.jquery.com/finish/
            Rightscale.svgEl.finish();
            Rightscale.svgEl.playKeyframe({
              name: Rightscale.state ? 'vertical':'horizontal',
              duration: 10 * 1000
            });
            Rightscale.state = !Rightscale.state;
        });
    },

＆＃13;

停止一个功能并切换另一个功能

3 个答案: