0

私のコードの現在のバージョンはどのように機能しますか：

ユーザーのマウスポインターがNav要素にカーソルを合わせると、Webサイトの背景画像がより小さく不透明度の低いバージョンにフェードします。マウスがnav要素を離れると、前の画像に戻ります。

このためのコードは次のようになります。

$(document).ready(function(){
  $("li a").mouseenter(function(){
    $('.image').fadeTo(100, 0.5, function() {
    $(".image").css("background","url(images/backdrop_smaller.png)");
    });
  });
$("li a").mouseout(function(){
    $('.image').fadeTo(100, 1.0, function() {
    $(".image").css("background","url(images/backdrop_orig.png)");
  });
  });
});

これに関する唯一の問題は、ユーザーがNav要素間をすばやく移動すると、画像が急速にシフトし（方向が乱れているように見えます）、最終的にユーザーコマンドより遅れることです（.fadeTo間隔のため）。

これを防ぐために、ユーザーがnav要素を離れて別の要素に入る時間を出力するコンソールタイマーを設定すると思いました。次に、if関数を作成して、最初のマウスアウト遷移が完了するまで再生されるかどうかを指定します。

タイマーは次のようになります。

$(document).ready(function(){
  $("li a").mouseout(function(){
    console.time("time")
});
});

  var FunctionEndTime = $(document).ready(function(){
  $("li a").mouseenter(function(){
    var end = console.timeEnd("time")
});
});

私の問題は、if関数でこの印刷されたコンソール時間を参照し、.mouseoutによってトリガーされたフェードが再生されて完了するのを防ぐことにあります。たとえば、時間差がフェード時間（100ms）未満の場合、フェードは遷移を停止します。これにより、不透明度の低い背景画像が残り、画像のちらつきや方向が乱れるのを防ぎます。

動作していないコードは次のようになります。

function TimeReset() {
  if (end < 25)
  {
    $(document).ready(function(){
  $("li a").mouseout(function(){
     $('.image').fadeTo(100, 0.5, function() {
    $(".image").css("background","url(images/backdrop_smaller.png)");
      });
  });
});
}

上記のコードは明らかに私が望むことを行わず、物事を誤って参照しています。私はそれを正しく行う方法がわかりません。

問題は、これについてすべて間違って考えているのかということです。または、コードを最後まで実装する方法がわからないのですか？

4

1 に答える 1

0

カーソルの高速移動での点滅を防ぐために、新しいアニメーションステップをキューに入れる前に$ .stop（）を使用することを検討してください。次のようになります。

$('.image').stop().fadeTo(100, 0.5, function() { ...

$ .stop（）には、役立つ2つのオプションのパラメーターがあることに注意してください。

于 2012-12-05T14:24:55.257 に答える