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”=＆gt;“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};

当您执行left时，您已从数组中获得right或direction = Math.floor(Math.random() * 2)字符串，但您并未将其用作属性。您为goTo分配的内容是字符串left或right，但是当您传递给options对象时，您相信它会使用该变量的值，但它没有。您正在使用属性options定义goTo对象，这在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。

在此处查看工作小提琴：http://jsfiddle.net/abhitalks/wbag5wv3/2/

重要：

另外，请注意，小提琴中的代码（虽然它修复了您的代码）仍然无法按预期工作。这是因为当left为direction时，您必须清除/重置right属性。并且，当right为direction时，同样清除left属性。怎么做，留给你作为练习。

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从变量向左或向右动画

3 个答案:

重要：