javascript - 淡入淡出图像之间没有黑色传输 - JQuery

Question

http://www.chooseyourtelescope.com/

当您将鼠标悬停在 Logo 按钮(月亮、行星等...)上时，它会执行 background1>BLACK>background2。

我想直接获取 background1>Background2 并保持淡入淡出效果。

(我对 Javascript 一无所知，我在下面的 Stackoverflow 上找到了这段代码)

这是月亮按钮的代码:

HTML

  <div class="top-logos-home" id="top-logos-lune-front" >
      <img src="logo-moon.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;
}

JQUERY

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', '')
    })
})

Answer 1

我在这里创建了一个 jsFiddle:https://jsfiddle.net/h0f6y58z/

HTML

<div class="top-logos-home" id="top-logos-lune-front">
    <img class="image-1 image" src="http://s.hswstatic.com/gif/singapura-cat.jpg" />
    <img class="image-2 image" src="https://pbs.twimg.com/profile_images/424484505915621376/EOwsjaMZ_400x400.png" />
</div>

CSS

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

jQuery

$(function () {
    $('.image-2').hide();

    $('.top-logos-home').mouseover(function () {
        $('.image-1').fadeOut();
        $('.image-2').fadeIn();
    });
});

所有这一切都是检查鼠标是否进入 div，如果是，我们将淡出第一个图像并淡入第二个图像。如果您愿意，可以使用第一张图片隐藏和最后一张图片显示

像这样

jQuery

$(function () {
    $('.image-2').hide();

    $('#top-logos-lune-front').mouseover(function () {
        $('.image').first().fadeOut();
        $('.image').last().fadeIn();
    });
});