1

jQuery 1.4.2：

画像があります。マウスオーバーイベントがトリガーされると、ループを実行して複数の画像をロードする関数が実行されます。逆に、mouseoutイベントは、画像を所定の画像に戻す必要があり、ループを実行しなくなります。これらは、クラス「thumb」の画像専用です。

$("img.thumb").live("mouseover mouseout", function(event) {
    //var foo = $(this).attr('id');
    var wait;
    var i=0;
    var image = document.getElementById(foo);

    if (event.type == 'mouseover') {
        function incrementimage()
        {
            i++;
            image.src = 'http://example.com/images/file_'+i+'.jpg';
            if(i==30) {i=0;}
        }    
        wait = setInterval(incrementimage,500);
    } else if (event.type == 'mouseout') {
        clearInterval (wait);
        image.src = 'http://example.com/images/default.jpg';
    }
    return false;
});

マウスアウトすると、画像はdefault.jpgに設定されますが、ブラウザは画像をループし続けます。それは決して止まりません。誰かが知識を持って私を殴ることはできますか？ありがとう。

4

3 に答える 3

2

コードをこれまで短くして、間隔を適切にクリアすることができます。

$("img.thumb").live("mouseover", function() {
  var i = 0, image = this, incrementimage = function() {
    i++;
    image.src = 'http://example.com/images/file_'+i+'.jpg';
    if(i==30) {i=0;}
  };
  $(this).data('timer', setInterval(incrementimage,500));
}).live("mouseout", function() {
  clearInterval($(this).data('timer'));
  this.src = 'http://example.com/images/default.jpg';
});

これにより、呼び出しが分割.live()されてロジックが少しわかりやすくなり、グローバル変数としてではなくをwait使用して、要素自体に以前のIDが格納されます。.data()

于 2010-05-10T02:18:12.793 に答える
1

wait問題は、mouseoutイベントがmouseoverイベントと同じように表示されないことです。別の場所に保管する必要があります。data()][1][を使用して要素に保存することをお勧めします。

また、このシーケンスは意味がありません。

var foo = $(this).attr('id');
...
var image = document.getElementById(foo);

thisすでに画像要素です。

最後に、それは私が関数を定義する方法ではありません。次のようなものを試してください：

$("img.thumb").live("mouseover", function(evt) {
  var wait = $(this).data("wait");
  if (!wait) {
    clearInterval(wait);
  }
  var i = 0;
  var image = this;
  var incrementImage = function() {
    i++;
    image.src = "http://example.com/images/file_" + i + ".jpg";
    if (i == 30) {
      i = 0;
    }
  }
  wait = setInterval(incrementImage, 500);
  $(this).data("wait", wait);
  return false;
});

$("img.thumb").live("mouseout", function(event) {
  var wait = $(this).data("wait");
  if (wait) {
    clearInterval(wait);
  }
  img.src = "http://example.com/default.jpg";
  return false;
});
于 2010-05-10T02:08:24.547 に答える
0

var wait.live（）イベントの外に移動してみましたか？

var wait
$("img.thumb").live("mouseover mouseout", function(event) {
于 2010-05-10T02:08:59.350 に答える