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

Fade images without black transfer between them - JQuery

本文关键字：黑色 传输 -JQuery 淡出 图像 之间 淡入      更新时间：2023-09-26

http://www.chooseyourtelescope.com/

当你将徽标按钮(月亮、行星等(悬停时，背景1>黑色>背景2。

我想直接获得背景1>背景2并保持渐变效果。

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

我在这里创建了一个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();
    });
});

我通过使用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")
    })
 });
相关文章：