javascript - 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);
 }
);    

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

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

谢谢!

编辑

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

$(".bgimage").stop()

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

当您从一个链接跳转到另一个链接时，我希望它首先完成淡出动画，然后淡入当前动画(如果可能的话)。

Answer 1

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

示例:

<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');
  }
);