Jquery 背景图像褪色 - 有没有更好的方法来做到这一点？

Question

我对 js 和 jquery 还很陌生，所以我写了一些基本上可以做我想做的事情，但我确信有更好的方法来做。它也有点错误，所以我希望可以修复。

我的网站在这里http://www.madebyandrew.com，我想讨论一下菜单，当您点击顶部的“菜单”时，它会显示为叠加层。

基本上我所做的是在 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>

当您将鼠标悬停在链接上时，我希望相关图像在背景中全屏显示。为此，我创建了一个 div 类的 bgimage，它具有以下 css 属性：

.bgimage{

  position:fixed;
  z-index:-10;
  width:100%;
  height:100%;
  background-size:cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important; 

}

我创建了一个数组来存储我的不同背景图像，我创建了一个变量，它获取突出显示的 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 动画必须在fadeOut 开始之前完全完成，这意味着它感觉不到它是响应式的。当您从一个链接快速移动到另一个链接时也会出现问题，我希望一个淡出而另一个淡入。但是，它不能这样做，因为我立即更改了背景图像。

如果有人能指出一个更好的方法来做到这一点，我将不胜感激，因为我的知识还没有达到标准。

谢谢！

编辑

按照下面Mitko的建议，我已经添加了

$(".bgimage").stop()

这已经阻止了动画反复播放，所以它越来越近了。但是，当您快速从一个链接跳到下一个链接时，没有淡入淡出动画。

当您从一个链接跳转到另一个链接时，我希望它首先完成淡出动画，然后在可能的情况下使用当前动画淡入。

Answer 1

您提到的问题是因为动画（淡入和淡出）尚未完成，当另一个动画开始时。要停止正在运行的动画，请在调用 fadeIn 和 fadeOut 之前调用 $(".bgimage").stop()。

Answer 2

如果您使用 css 过渡属性，它们会更好地过渡。过渡不适用于 background-image 属性，但如果将图像堆叠在一起，则可以过渡它们的不透明度。

例子：

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

然后更新你的css：

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

.bgimage.active {
    opacity: 1;
}

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

在你的 javascript 中，

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