Jquery 背景图像淡化 - 有更好的方法吗？

Question

我是 js 的新手，jquery 所以我写了一些基本上可以完成我想要它做的事情，但我确信有更好的方法来做到这一点。它也有点问题，所以我希望可以修复它。

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

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

当您将鼠标悬停在 link 上时，我希望在背景中全屏显示相关图像。为此，我创建了一个 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 的索引并使用它从数组中获取正确的背景。然后，当鼠标悬停在 link 之一上时，我使用 .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);
 }
);

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

如果有人能指出更好的方法，我将不胜感激，因为我的知识还不够全面。

谢谢！

编辑

根据下面 Mitko 的建议，我添加了

$(".bgimage").stop()

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

当您从一个 link 跳到另一个时，我希望它做的是先完成淡出动画，然后淡入当前动画（如果可能的话）。

Answer 1

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

Answer 2

如果您使用 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');
  }
);

Jquery 背景图像淡化 - 有更好的方法吗？

Jquery background image fade - Is there a better way to do this?

javascript

css

jquery

background

image