jQuery 动画功能只工作一次答案

【问题标题】：jQuery animate function work only one timejQuery 动画功能只工作一次
【发布时间】：2016-11-10 03:49:57
【问题描述】：

我在 SVG 中有一个使用 jQuery animate 函数的开关，但适用于我的“circle” SVG 元素的“cs”属性。

$('#filtres-reglages ul li label input:checkbox').click(function (e) {
    var oswitch = $(this).parent().find("svg#switch");
    var path = oswitch.find("path");
    var circle = oswitch.find("circle");

    if($(this).is(':checked')) {
        $(circle).animate(
            {'foo':20},
            {
                step: function(foo) {
                    $(this).attr('cx', 10+foo);
                },
                duration: 200
            }
        );
    } else {
        $(circle).animate(
            {'foo':20},
            {
                step: function(foo) {
                    $(this).attr('cx', 30-foo);
                },
                duration: 200
            }
        );

    }
});

HTML：

<label>
    <svg id="switch" class="switch-off" xml:space="preserve" enable-background="new 0 0 40 20" viewBox="0 0 40 20" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g>
            <g>
                <path d="M30,0L30,0L30,0H10C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10h20l0,0h0c5.5,0,10-4.5,10-10C40,4.5,35.5,0,30,0z " fill="#CCCCCC">
            </g>
            <g>
                <circle r="8" cy="10" cx="10" fill="#FFFFFF">
            </g>
        </g>
    </svg>
    <input type="checkbox" name="champs_societes[]" value="capital_int">
    <span>Capital</span>
</label>

当我的复选框被选中时，我增加 cx，当没有选中时，我减少。

但渐进式动画只在第一次工作。之后直接从30切换到10，从10切换到30，为什么？

感谢您的帮助

【问题讨论】：

请在您的问题中添加一个最小的工作示例。

标签： jquery svg jquery-animate

【解决方案1】：

您要做的是将 foo 从 0 设置为 20，然后再次返回 0。

您实际上所做的是从 0 到 20，然后到 20。但是在第二部分中，您从 30 中减去该值，因此您实际上只是在一个动画步骤中从 20 跳到 (30-20)。

这是你应该做的：

$('label input:checkbox').click(function (e) {
    var oswitch = $(this).parent().find("svg#switch");
    var path = oswitch.find("path");
    var circle = oswitch.find("circle");

    if($(this).is(':checked')) {
        $(circle).animate(
            {'foo':20},
            {
                step: function(foo) {
                    $(this).attr('cx', 10+foo);
                },
                duration: 200
            }
        );
    } else {
        $(circle).animate(
            {'foo':0},
            {
                step: function(foo) {
                    $(this).attr('cx', 10+foo);
                },
                duration: 200
            }
        );

    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
    <svg id="switch" class="switch-off" xml:space="preserve" enable-background="new 0 0 40 20" viewBox="0 0 40 20" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g>
            <g>
                <path d="M30,0L30,0L30,0H10C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10h20l0,0h0c5.5,0,10-4.5,10-10C40,4.5,35.5,0,30,0z " fill="#CCCCCC"/>
            </g>
            <g>
                <circle r="8" cy="10" cx="10" fill="#FFFFFF"/>
            </g>
        </g>
    </svg>
    <input type="checkbox" name="champs_societes[]" value="capital_int">
    <span>Capital</span>
</label>

【讨论】：