Question

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

当你悬停按钮（月亮，星球等......）时，它会改变背景。但是转换在Chrome上是错误的（image0＆gt;空白＆gt; image1）。在IE11上工作但有时会有滞后。我没有尝试过其他浏览器。

如何顺利过渡？快速淡化Image0＆gt; image1，而不是image0＆gt;过渡颜色＆gt; image1

以下是MOON按钮的代码。这和其他人一样。 （我对Javascript一无所知。我在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'
];

完成此步骤后，您需要添加新的attiribute按钮，例如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

我使用不透明度属性找到了解决方案。现在它完美运作。

<强> 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")
    })
 });

平滑的背景图像过渡 - Javascript

2 个答案: