-1

首先，我为我糟糕的英语感到抱歉。

我的代码有问题，无法弄清楚。我在 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;
                };
            });
        };
    });
});
4

2 回答 2

0

与您的问题无关，但是当您声明 beer = $("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('background-position');

于 2013-06-25T14:52:31.503 回答
0

您需要将 jquery 中的属性设为驼峰式：

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

确保 amountToAnimate 是恒定的，如 -150

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

Opera 和 Firefox 不符合这个标准。

您可以使用 step 来实现这一点

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

于 2013-06-25T14:46:02.073 回答