1

jQueryを適用する必要のあるdiv-のセットがあります。

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

簡単そうに見えますが、もう少し柔軟にしたかったのです。それは不可能かもしれませんが......しかし、jQuery関数を何倍ものレイヤーにコピーして貼り付ける代わりに、マウスオーバーアクションからレイヤー名を取得して配置する方法があるのではないかと思いました。次のスクリプトで使用できる変数：

$(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;
});
4

3 に答える 3

0

マウスオーバー関数のスコープ外に変数を設定し、関数内のその変数に$（this）を割り当てることができます。

そのVar;

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

次に、それを使用して、の外側の要素を参照します。ここで何をしようとしているのかわかりませんが、それが「要素を渡す」ための1つの方法です。

于 2012-12-08T13:46:48.507 に答える
0

divごとに関数をコピーしたくない場合は、それぞれjQueryを使用します

各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);
});
于 2012-12-08T14:04:48.483 に答える
0

ここに行く男...

フィドル

$('.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);

});
于 2012-12-08T14:09:14.450 に答える