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）还没有完成，当另一个动画开始时。要停止正在运行的动画，请在调用fadeIn和fadeOut之前调用$(".bgimage").stop()。

Answer 2

如果使用css transition属性，它们将更好地转换。转换不适用于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');
  }
);

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

2 个答案: