Question

首先，我很抱歉我的英语很差。

我的代码有问题但无法解决。我在div.beer中有一个很大的背景图像。 div.beer是150x150大。背景图像用网格划分，网格中的每个块都是150x150。每次.animate在x轴上运行-150px时，它都会移动背景图像。它工作得很好，但它的口吃，我不知道为什么？提前谢谢。

<div class="persons">
    <div class="beer">
    </div>
</div>

$(document).ready(function(){
    var endPosition = [1067, 1062, 1073, 1078, 1084, 1056];
    var bgPosition = $('div.beer').css('background-position');
    var bgSplit = bgPosition.split('px');
    var bgX = parseInt(bgSplit[0]);
    var bgY = parseInt(bgSplit[1]);
    var i = 1;
    var beer = $('div.beer');
    $('div.beer').click(function(){
        var x = Math.floor(Math.random()*7);
            anim();
            function anim(){
            beer.animate({
                'background-position-x': bgX-=150
            },50, function(){
                if(bgX <= -1650 && bgY <= -1650){
                    bgY = 0;
                    bgX = 0;
                };
                if( bgX <= -1650) {
                    bgX = 0;
                    bgY -=150;
                };
                bgPosition = beer.css({'background-position': bgX+'px '+bgY+'px'});
                i += 1;
                if(i<endPosition[x]){
                    anim();
                } else {
                    bgX = 0;
                    bgY = 0;
                    i = 1;
                };
            });
        };
    });
});

Answer 1

你需要将jquery中的属性用于：

$(selector).animate({ 
                   backgroundPositionX: amountToAnimate 
                }, duration,...);

确保amountToAnimate恒定为-150

background-position-x / y不是任何CSS规范的一部分，它的IE特定CSS，添加到IE5.5，后来由Webkit实现。

Opera和Firefox不符合此标准。

您可以使用步骤来实现此目的

http://jsfiddle.net/q9aeh/1/

Answer 2

与你的问题无关，但当你宣布啤酒= $（“div.beer”）时，你应该使用它：

//Saved! so use it!
var beer = $('div.beer');
var endPosition = [1067, 1062, 1073, 1078, 1084, 1056];
var bgPosition = beer.css('background-position'); //here
var bgSplit = bgPosition.split('px');
var bgX = parseInt(bgSplit[0]);
var bgY = parseInt(bgSplit[1]);
var i = 1;

beer.click(function(){ //and here

无需像以下一样再次选择它： $（ 'div.beer'）的CSS（ '背景位置'）;

Jquery：口吃动画

2 个答案: