2

だから私はアニメーションGIFを持っていて、.mouseout3.mouseover秒後にそこに静止画像を入れたいと思っています。私が使用している方法は の を変更することbackground-imageなので、div4 つの画像があります。

  1. ページがロードされたとき (私は通常の css ファイルでこれを行っています)
  2. マウスが上にあるとき（アニメーション化する必要があり、私はこのjQueryをやっています）
  3. マウスが出ているとき（アニメーション化する必要があり、私はこのjQueryをやっています）
  4. mouseout イベントの 3 秒後 (正常なはずです)

私は 4 で立ち往生しており、コードの書き方がわからないので、2 と 3 については次のとおりです。

    $("#ubBackground").hover(function(){
        $(this).stop().css("background-image","url(img/userBoxMouseOver.gif)");},
            function(){
      $('#ubBackground').css('background-image','url(img/userBoxMouseOut.gif)');
                        }
    );

使用する必要があると思います.delay()が、正確な方法がわかりません。助けていただければ幸いです。

4

1 に答える 1

3 
var timer;

$("#ubBackground").on({
    mouseenter: function(){
        clearTimeout(timer);
        $(this).css("background-image","url(img/userBoxMouseOver.gif)");
    },
    mouseleave: function() {
        var self=this;
        $(this).css('background-image','url(img/userBoxMouseOut.gif)');
        timer = setTimeout(function() {
            $(self).css('background-image','url(img/userBox3secLater.gif)');
        }, 3000);
    }
});

マウスが離れたときに 3 秒後に背景を変更するタイマーを設定し、マウスが 3 秒以内に再び入った場合に備えて、mouseenter のタイムアウトをクリアします。

于 2012-08-27T17:13:23.063 に答える