爲什麼變量不會傳遞？

Question

我有一套div-s，我需要應用一些jQuery。

<div id="anim1" class="animation"></div> 
<div id="anim2" class="animation"></div> 

它看起來很直接，但我想讓它更靈活一點。雖然... ...可能是不可能的，但是我沒有複製和粘貼jQuery函數多少次，我想知道是否有任何方式從mouseover動作中獲取圖層名稱並將其放入一個變量，我可以在以下腳本中使用：

$(document).ready(function() { 

$('.animation').mouseover(function() { 
    layer = '#'+this.id; 
}); 

var steps = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650, 2700, 2750, 2800, 2850, 2900, 2950,]; 
    var index = -1; 
    setTimeout(function() { 
     index++; 
     if(index == 57) { 
      index = 0; 
     } 
     $(layer).hover(function(){ 
     index ++; 
     }, function(){ 
     index -=1; 
     }); 
    $(layer).css('backgroundPosition', '-' + steps[index] + 'px 0px'); 
    setTimeout(arguments.callee, 50); 
    }, 25); 
}); 

我想知道我在做什麼錯在這裏。任何想法都非常感謝...

更新。試圖在$（document）.ready（function（）中聲明變量。我不確定是否可以這樣做，但至少動畫現在正在移動。唯一的問題是，當我

$(document).ready(function() { 
layer = $('.animation').mouseover(function() { 
    '#'+this.id; 
}); 

Answer 1

在這裏你去的人...

FIDDLE

$('.animation').each(function() { 
    var anim = $(this); 

    var steps = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650, 2700, 2750, 2800, 2850, 2900, 2950 ]; 
    var index = -1; 

    setTimeout(function() { 
     index++; 
     if (index == 57) { 
      index = 0; 
     } 
     anim.hover(function() { 
      index++; 
     }, function() { 
      index -= 1; 
     }); 
     anim.css('backgroundPosition', '-' + steps[index] + 'px 0px'); 
     setTimeout(arguments.callee, 50); 
    }, 25); 

}); 

Answer 2

你可以只設立一個變量了鼠標功能的範圍，一邊將鼠標懸停在任何一個：，然後分配$（本），該變量的函數

瓦爾那裏面;

$('.animation').mouseover(function() { 
    that = $(this); 
}); 

然後使用它來指代我之外的元素。 e你在這裏想要做的，但這是「傳遞元素」的一種方式。

Answer 3

當你不慣於複製您爲您的每個div的功能，我會用jQuery each

我想給每個div的類名：

<div class="anim" class="animation"></div> 
<div class="anim" class="animation"></div> 

，然後指定你的效果在每個元素：

$('.anim').each(function(index_each, element) { 

    var steps = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650, 2700, 2750, 2800, 2850, 2900, 2950,]; 
    var index = -1; 

    setTimeout(function() { 
    index++; 
    if(index == 57) { 
     index = 0; 
    } 

    $(element).hover(function(){ 
     index ++; 
     }, function(){ 
      index -=1; 
    }); 

    $(element).css('backgroundPosition', '-' + steps[index] + 'px 0px'); 
    setTimeout(arguments.callee, 50); 
    }, 25); 
});