Javascript Jquery背景图像淡入淡出-有更好的方法吗？

我对js和jquery还很陌生，所以我写了一些基本上符合我要求的东西，但我相信有更好的方法。这也是一个有点车，所以我希望可以修复

我的网站在这里，我想讨论一下菜单，当你点击顶部的“菜单”时，它会显示为一个覆盖图

基本上我所做的就是在html中创建一个ul列表，如下所示

<ul id="menuList">

    <li class="bgButton"><a href="#">NZSki</a></li><br/>
    <li class="bgButton"><a href="#">Theta</a></li> <br/>
    <li class="bgButton"><a href="#">Ports of Auckland</a></li> <br/>
    <li class="bgButton"><a href="#">Total Compliance</a></li> <br/>
    <li class="bgButton"><a href="#">Ted's Grooming Room</a></li> <br/>
    <li class="bgButton"><a href="#">Coffee & Jam</a></li> <br/>
    <li class="bgButton"><a href="#">Treble Seven</a></li> <br/>
    <li class="bgButton"><a href="#">Diacle</a></li> <br/>

</ul>

我创建了一个数组来存储不同的背景图像，并创建了一个变量，该变量获取高亮显示的li的索引，并使用该索引从数组中获取正确的背景。然后，当鼠标悬停在其中一个链接上时，我使用.hover使背景图像淡入淡出

var bgImg = ["url('images/menu1/background1.jpg')",
"url('images/menu1/background2.jpg')",
"url('images/menu1/background3.jpg')",
"url('images/menu1/background4.jpg')",
"url('images/menu1/background5.jpg')",
"url('images/menu1/background6.jpg')",
"url('images/menu1/background7.jpg')",
"url('images/menu1/background8.jpg')"];


$(".bgButton").hover(
  function () {
   var index = $( "li" ).index(this);
    $(".bgimage").css({
      display: "none",
      background: bgImg[index]
    });
  $(".bgimage").fadeIn(400);
 }, function() {
  $(".bgimage").fadeOut(200);
 }
);    

所以，这现在大致上就是我想要的。除了，它似乎是马车。当我将鼠标悬停在某个链接上并快速移除鼠标时，背景图像有时会闪烁。另外，如果我将鼠标悬停在链接上并快速移除鼠标，fadeIn动画必须完全完成，然后才能开始淡出，这意味着它感觉不到响应。还有一个问题，当你从一个链接快速移动到另一个链接时，我希望其中一个淡出，而另一个淡入。但是，它不能这样做，因为我立即更改了背景图像

如果有人能告诉我一个更好的方法，我将不胜感激，因为我的知识还没有达到标准

谢谢

编辑

正如下面Mitko所建议的，我已经补充了

$(".bgimage").stop()

这阻止了动画一次又一次的播放，所以它越来越近了。但是，当您快速从一个链接跳到下一个链接时，不会出现淡入淡出动画

---

当你从一个链接跳到另一个链接时，我希望它能做的是首先完成淡出动画，然后使用当前动画淡入，如果可能的话

您提到的问题是，当另一个动画启动时，动画（fadeIn和fadeOut）尚未完成。要停止正在运行的动画，请在调用fadeIn和fadeOut之前调用

$（“.bgimage”）.stop（）

。

如果您使用css transition属性，它们将进行更好的转换。“过渡”不适用于“背景图像”属性，但如果将图像堆叠在彼此的顶部，则可以过渡其不透明度

例如：

<div class="menu-background">
    <div class="bg-0 bgimage"></div>
    <div class="bg-1 bgimage"></div>
    <div class="bg-2 bgimage"></div>
</div>

在javascript中

$(".bgButton").hover(
  function () {
    var index = $( "li" ).index(this);
    $(".bg-" + index).addClass('active');
  }, function() {
    $(".bgimage").removeClass('active');
  }
); 

---

这太完美了！非常感谢。

.bgimage {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.bgimage.active {
    opacity: 1;
}

.bg-0 {
    background-image: url('images/menu1/background1.jpg');
}
...

$(".bgButton").hover(
  function () {
    var index = $( "li" ).index(this);
    $(".bg-" + index).addClass('active');
  }, function() {
    $(".bgimage").removeClass('active');
  }
);