Jquery：口吃动画

-1

首先，我很抱歉我的英语不好。Jquery：口吃动画

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

来源

2013-06-25 Daniel I.

给我们一些html ... – shennan

它可能是图像太大？尝试使用较小的图像。 – Chanckjh

图片是2200x2200。我认为这应该工作，但我不确定。编辑：对不起，它是1800x1800。在我的脑海里有错误的数字。 –

需要在jQuery的骆驼情况下你的属性：

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

确保amountToAnimate是恒定像-150

背景位置-X/Y不是任何部分CSS规范，其IE特定的CSS，添加到IE5.5，后来由Webkit实现。

Opera和Firefox不符合此标准。

你可以用一步实现这个

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

来源

2013-06-25 14:46:02 arifnpm

非常感谢！它工作完美。 –

无关，与你的问题，但是当你声明啤酒= $（ “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-25 14:52:31 reyaner

Facepalming自己。谢谢先生。 :) –

Jquery：口吃动画

回答

相关问题