Question

我正在尝试使用精灵表和for循环来创建动画来操纵背景位置，直到它达到工作表中的总数或行数。理想情况下，重置回初始位置是可行的，但我甚至无法让动画本身触发......

使用当前功能，不会发生错误，CSS中的背景位置也不会改变。我甚至使用Chrome DevTools时间轴记录，然后没有任何内容与我的页面加载相关。我也尝试过使用“background-position-y”以及更简单的值，而不是我现在的数学。

这是我的功能：

$(document).load(function() {
    var $height= 324;
    var $rows= 34;
    for(var i=0; i<$rows; i++){
        setTimeout(function() {
            $('#selector').css("background-position", "0px ", "0" - ($height*i) + "px");
        }, 10);
    }
});

我讨厌提出一个类似于以前问题的问题，但我似乎无法找到另一个人尝试使用for循环的精灵表动画，所以我认为这是它自己的问题。

P.S。我没有包含我的HTML和CSS的片段，因为它非常标准，我不知道这可能是什么问题。话虽如此，我对任何潜在的想法都很感激！

Answer 1

我完全改变了我的回答这个问题是for()循环不受setTimeout影响，因此该函数需要按照我们自己的条件编写，而不是loop

Working Fiddle

这是..

var $height= 5;
var $rows= 25;
var i = 1; // Starting Point

(function animateMe(i){
    if(i<=$rows){ // Test if var i is less than or equal to number of rows
        var newHeight = 0-($height*i)+"px"; // Creat New Height Position
        console.log(i); //Testing Purposes - You can Delete
        $('#selector').css({"background-position": "0px "+ newHeight}); // Set New Position
        i++; // Increment by 1 (For Loop Replacement)  
        setTimeout(function(){animateMe(i)}, 1000);  // Wait 1 Second then Trigger Function 
    };
})(0);

Answer 2

这是您的解决方案

第一次改变

 $(document).load() To $(document).ready()

将.css Syntex改为

$('#selector').css("background-position",'0px '+(0 - ($height*i))+'px');

这是小提琴检查它我已经在我最近的项目http://jsfiddle.net/krunalp1993/7HSFH/

上实现了它

希望它可以帮助你：）

使用for循环的Sprite Animation

2 个答案: