平滑的背景图像过渡-Javascript

Question

http://www.chooseyourtelescope.com/ （>>请在至少15英寸的屏幕上观看，该网站尚未完全响应，您将看不到我在说什么）

当您将鼠标悬停在按钮（月亮，行星等）上时，它将更改背景。 但是在Chrome浏览器上的转换是有问题的（image0> blank> image1）。 在IE11上工作，但有时会有些滞后。 我没有尝试使用其他浏览器。

如何顺利过渡？ 快速褪色Image0> image1，而不是image0>过渡色> image1

这是MOON按钮的代码。 其他人也一样。 （我对Java脚本一无所知。我在Stackoverflow上找到了以下脚本。）

的HTML

<div class="top-logos-home" id="top-logos-moon-front"><img src="moon-logo.png" alt="MOON"></div>

的CSS

.image-home {
     position: absolute;
     width: 100%;
     height: 100%;
     background-image: url(Frontpage.jpg);
     background-size: cover;
     display:inline;
     top:0;
}

JAVASCRIPT

jQuery(function(){
    var $body = $('.image-home');
    $('#top-logos-moon-front').hover(function(){
        $body.css('background-image', 'url("Frontpage-moon.jpg")')
    }, function() {
        $body.css('background-image', '')
    })
})

Answer 1

如果要平滑转换，只需要更改脚本代码即可。

jQuery(function(){
    var $body = $('.image-home');
    $('#top-logos-moon-front').hover(function(){
        $body.fadeOut('slow',function(){
          $body.css('background-image', 'url("Frontpage-moon.jpg")').fadeIn('slow');
        });
    }, function() {
        $body.css('background-image', '')
    })
})

---

如果您想为此提供最佳解决方案，则需要执行以下步骤。

首先，您需要使用以下代码在js中定义图像的路径。

var imgs = [
  'http://i.imgur.com/DwLjYhh.jpg',
  'http://i.imgur.com/gAlqfUU.jpg'
];

完成此步骤后，您需要为按钮添加新的外观，例如data-id。

<div class="top-logos-home" id="top-logos-moon-front" data-id='0'>
   <img src="button_image_jpg" alt="MOON">
</div>

定义所有变量时，需要使用当前代码检测悬停，并为背景选择imgs数组中的正确图像。

jQuery(function(){
    var $body = $('.image-home');
    $('#top-logos-moon-front').hover(function(){
     $body.fadeOut('slow',function(){
        //fade out slowly element and after change the style of inner elements then fade in slowly.
        $body.css('background-image','url('+imgs[$(this).attr('data-id')]+')').fadeIn('slow');
     });
    });
});

我个人认为； 图像过渡不应以这种方式进行管理。 为每个行星创建不同的元素。 当用户单击按钮时，行星滑动并重叠。 您可以在下面的代码中看到一个演示。

http://codepen.io/thegeek/pen/GDwCa

Answer 2

我通过使用opacity属性找到了解决方案。 现在，它可以完美运行。

的HTML

<img id="background-moon-front" class="hover-backgrounds" src="Frontpage-moon.jpg" />

的CSS

.hover-backgrounds {
    opacity:0;
    transition: opacity 0.6s linear;
    top:0;
    position:absolute;
    background-size: 100%;
}

JAVASCRIPT

$(document).ready(function (e) {
    $("#top-logos-lune-front").hover(function (e) {
    $("#background-moon-front").css("opacity", "1");
    }, function() {
        $("#background-moon-front").css("opacity", "0")
    })
 });