jquery - 更改背景图像(悬停)时屏幕闪烁

Question

简单的想法。页面有背景图片。当用户将鼠标悬停在某个链接上时，图像会发生变化。

这是实现:http://www.goel.io/ (将鼠标悬停在社交链接上)

您会注意到一道闪光。我知道那是因为数据传输和渲染需要很短但很明显的时间。此外，您还可以注意到，在图像更改期间，新图像是它自己的原始大小，然后调整到全屏大小。

这是设置背景图片的代码:

.bg {
    content: "";
    z-index: -1;
    position: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
    background-image: url(/images/schemes/orange.svg);
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear
}

下面是改变 bg 的代码:

$(".btn-blog").mouseover(function(e) {
    $(".bg").css("background-image", "url(/images/schemes/orange.svg)");
});

我已经尝试了很多东西并研究了很多东西。似乎没有什么相关的。

关于如何解决这两个问题有什么想法吗？

Answer 1

尝试使用 .fadeTo() , Array.prototype.concat() Array.prototype.splice()

$(function() {
  $.fx.interval = 0;
  (function(bg, btn) {
    btn.mouseover(function(e) {
      bg.fadeTo(75, 0.9, "linear", function() {
        bg.fadeTo(75, 1.0, "linear", function() {
          var img = bg.css("backgroundImage").split(", ");
          img = img.concat(img[0]).splice(1, 4).join(",");
          bg.css("backgroundImage", img)
        });
      })
    })
  }($(".bg"), $(".btn-blog")));
})

.bg {
  width: 100%;
  /* 100% */
  height: 100%;
  /* 100% */
  display: block;
  opacity: 1.0;
  z-index: -1;
  position: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%, 0px, 0px, 0px;
  background-image: url("http://lorempixel.com/300/300/nature"), url("http://lorempixel.com/300/300/cats"), url("http://lorempixel.com/300/300/sports"), url("http://lorempixel.com/300/300/technics");
  -webkit-transition: background-image -150ms linear;
  -moz-transition: background-image -150ms linear;
  -ms-transition: background-image -150ms linear;
  -o-transition: background-image -150ms linear;
  transition: background-image -150ms linear;
}
.btn-blog {
  font-size: 36px;
  text-align: center;
  border: 1px solid #fff;
  display: block;
  position: relative;
  left: 39%;
  top: 10px;
  width: 120px;
}
.btn-blog:hover {
  cursor: wait;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg">
  <span class="btn-blog">hover</span>
</div>