Question

我的代码的当前版本如何运作：

当用户的鼠标指针悬停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间隔）。

为了防止这种情况，我想我会设置一个控制台计时器来打印用户离开导航元素并进入另一个元素的时间。然后创建一个if函数来指示第一个mouseout转换是否完成。

计时器如下所示：

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

上面的代码显然没有按照我的意愿行事，并且错误地引用了一些内容。我只是不确定如何正确地做到这一点。

问题是：我是否认为这一切都错了？或者我只是不知道如何实现代码来完成？

Answer 1

为防止快速光标移动时闪烁，您可以考虑在排队新动画步骤之前使用$.stop()。看起来应该是这样的：

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

请注意$ .stop（）有两个可选参数，可以提供帮助。

console.timeEnd（“”）if函数的引用（Javascript）

1 个答案: