在 JQuery 中为多个变量值设置动画

【问题标题】：Animate multiple variable values in JQuery在 JQuery 中为多个变量值设置动画
【发布时间】：2015-08-11 19:07:57
【问题描述】：

我可以在单个动画中为多个变量值设置动画吗？我想将两个变量值从这个值动画到那个值。

在这段代码中，我希望 x 和 y 值从给定值动画到另一个值，但我只能使用 x 来实现。（代码基于此处的答案，但希望在使用多个值时获得一些帮助：jquery "animate" variable value）

$({someValue: 0}).animate({someValue: -2147.141601481341}, {
    duration: 5000,
    step: function() { 
        mainMap.pan({x: someValue, y: -5937.031428375433})
    }
});

【问题讨论】：

标签： javascript jquery animation jquery-animate

【解决方案1】：

只需向您的对象添加多个属性。试试看：

//initial values          end values
$({x: 0, y: 10}).animate({x: 10, y: 0}, {
    duration: 5000,
    step: function() { 
        $('#x').text(Math.round(this.x));
        $('#y').text(Math.round(this.y));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

x: <span id="x"></span> <br/>
y: <span id="y"></span>

您的代码应该类似于：

$({x: 0, y: 0}).animate({x: -2147.141601481341, y: -5937.031428375433}, {
    duration: 5000,
    step: function() { 
        mainMap.pan(this)
        // or mainMap.pan({x: this.x, y: this.y, foo: "bar"})
    }
});

【讨论】：

天哪，谢谢你成功了。太感谢了。谢谢。