我可以使用JavaScript/jQuery实时移动对象来创建动画吗？

-2

我有一个存储PHP系列动作的项目。例如，我有一个带有两个盒子的100x100网格。 PHP代码创建箱子移动到的坐标，每个箱子可以每回合执行多次移动。我可以使用JavaScript/jQuery实时移动对象来创建动画吗？

我想动画的动作，使用户可以看到盒子实时移动。为此，我使用PHP创建了一个坐标为JS的数组，然后创建一个jQuery脚本来遍历数组并逐个移动对象，使用setTimeout来控制更改的速度。

但是，这似乎只是处理所有的动作，然后只输出最终的位置。 Firefox的效果比Chrome好一些，但setTimeout似乎延迟了显示的最终结果，而不是延迟每一步。

有没有一种方法可以实时显示每个动作？

这里是我的JS：

var locations = {}; 
locations[0] = { "box":"box1" , "left":"52" , "top":"94" }; 
locations[1] = { "box": "box2" , "left":"0" , "top":"18" }; 
locations[2] = { "box": "box1" , "left":"29" , "top":"34" }; 
... 

$(document).ready(function(){ 
    $.each(locations,function(step,details){ 
     setTimeout(processMove,1000,step,details); 
    }); 
}); 
function processMove(step,details){ 
    var box = $('#' + details['box']); 
    box.css("left",details['left'] + 'px'); 
    box.css("top",details['top'] + 'px'); 
}

感谢提前:)

来源

2017-07-30 Ian Copeland

有在API为[效果]一个整体部分（http://api.jquery.com/category/effects/）。一个简单的谷歌搜索'jQuery动画'会产生许多结果。 [Stack Overflow用户需要多少研究工作？]（https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） – charlietfl

The问题不在于jQuery动画效果。 –

可以肯定地这样解释，因为它不是很清楚什么*“实时显示每个动作”*真正的意思。更何况... ***“我想动画的动作”*** – charlietfl

这将适用于您的设置，但我会建议使用数组locations而不是对象。

var locations = {}; 
 
locations[0] = { "box":"box1" , "left":"52" , "top":"94" }; 
 
locations[1] = { "box": "box2" , "left":"0" , "top":"18" }; 
 
locations[2] = { "box": "box1" , "left":"29" , "top":"34" };var cnt = 0; 
 
    
 
var handle = setInterval(function() { 
 
    //processMove(locations[cnt]); 
 
    console.log(locations[cnt++]); 
 
    if (cnt > Object.keys(locations).length - 1) { 
 
     clearInterval(handle); 
 
    } 
 
}, 1000);

来源

2017-07-30 19:46:32

完美，非常感谢你:) –

可以。在jQuery中有一个完整的API： http://api.jquery.com/animate/

来源

2017-07-30 19:42:26 user1777136

谢谢，但jQuery的动画不适合我需要的东西。 –

我可以使用JavaScript/jQuery实时移动对象来创建动画吗？

回答

相关问题