jQuery 从变量向左或向右动画

Question

我想用 jquery 动画让元素向右或向左移动，方向由数组生成。

这是我的代码：

var leftOrRight = ['left', 'right'];

for(i = 0; i < 10; i++)
{
    $('.footer').append('<div class="romb"></div>');
}

$('.romb').each(function(){

    var position = Math.random()*350,
        direction = Math.floor(Math.random() * 2),
        goTo = leftOrRight[direction],
        options = {goTo : position, 'bottom' : Math.random()*350};
        //alert(goTo);
        $(this).animate(options, Math.random()*1000, 'easeInOutBack');

});

这是小提琴：http://jsfiddle.net/wbag5wv3/

问题：变量（左或右）生成正确，但动画不会向左或向右移动。

如果我手动输入左或右，动画会正常工作。

我错过了什么？

Answer 1

JS: ( "direction" => "left or right" )

var leftOrRight = ['left', 'right'];

for(i = 0; i < 10; i++)
{
    $('.footer').append('<div class="romb"></div>');
}

$('.romb').each(function(){

    var pos = Math.random()*350,
        direction = leftOrRight[Math.floor(Math.random() * 2)],
        options = {left : pos, bottom : Math.random()*350};

    $(this).animate(options, Math.random()*1000, 'easeInOutBack');

});

Answer 2

您的代码有两个问题：

var position = Math.random()*350,
    direction = Math.floor(Math.random() * 2),
    goTo = leftOrRight[direction],
    options = {goTo : position, 'bottom' : Math.random()*350};

当您执行 direction = Math.floor(Math.random() * 2) 时，您已经从数组中获得了 left 或 right 字符串，但是您没有将其用作 [=75] =].您分配给 goTo 的是字符串 left 或 right，但是当您传递给 options 对象时，您认为它会使用该变量的值，但它不会。您正在使用属性 goTo 定义 options 对象，这在 CSS.
中没有任何意义
您正在将 position 分配给 goTo 属性。即使您解决了上述问题，您仍然没有分配正确的值。您的意思是 position 实际上用于 top。

解决方法:

像这样写你的代码：

var pos = Math.random()*350,
    direction = leftOrRight[Math.floor(Math.random() * 2)],
    options = {};
options['top'] = pos;
options[direction] = Math.random()*100;
$(this).animate(options, Math.random()*1000, 'easeInOutBack');

你看，当你给options[direction]赋值的时候，它会根据direction赋值给正确的属性。即它将是 options.left 或 options.right.

在此处查看有效的 fiddle：http://jsfiddle.net/abhitalks/wbag5wv3/2/

重要：

另外，请注意 fiddle 中的代码（虽然它修复了您的代码）仍然无法按预期工作。那是因为当你的 direction 是 right 时，你必须 clear/reset left 属性。并且，当您的 direction 为 left 时，同样清除 right 属性。如何做到这一点，留给你作为练习。

.

Answer 3

试试这个 Click Here to See the Demo

只需更改您的线路

 options = {goTo : position, 'bottom' : Math.random()*350};

到

options = {left : Math.random()*350};

修改函数

var leftOrRight = ['left', 'right'];

for(i = 0; i < 10; i++)
{
    $('.footer').append('<div class="romb"></div>');
}

$('.romb').each(function(){

    var pos = Math.random()*350,
        direction = leftOrRight[Math.floor(Math.random() * 2)],
        options = {left : Math.random()*350}; // UPDATED THIS LINE

    $(this).animate(options, Math.random()*1000, 'easeInOutBack');

});

工作演示-Click Here

jQuery 从变量向左或向右动画

jQuery animate to left or right from variable

jquery

jquery-animate

重要：