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：口吃動畫

回答

相關問題