Question

我设置了一个带有整页填充背景图片的网站（img / bg_start.jpg）： http://test.coffeeshop.abcde.biz/cascara/

如果将鼠标移动到页面中心的动物上方，则当前图像（img / bg_start.jpg）应该淡出，其他图片（img / bg_start2.jpg）应该淡入。

我基本上做了以下几点：

捕捉onMouseOver和-Out Event
在onMouseOver的情况下执行：

$('#mask2').css({height: $(window).height(),width: $(window).width()}).fadeIn(800, function(){
    $('#mask1').fadeOut(800);
});

在OnMouseOut的情况下，我的其他顺序基本相同（mask2 / mask1）

mask1和mask2的定义如下：

<div id="mask1" style="position: absolute; top: 0; left: 0; z-index:-1000; opacity: 1.0;">

<div id="mask2" style="position: absolute; top: 0; left: 0; z-index:-1000; opacity: 1.0; display:none">

不幸的是效果并不顺畅，但是它闪烁..有人可以帮我吗？！

Answer 1

好的，那么对你来说这是怎么回事： http://jsfiddle.net/txezfv7d/

前提：一个图像总是可见。根据某些条件，第二个图像被简单地淡入或淡出。这意味着您无法获得闪烁，因为背景始终可见。

HTML

<div class="fader">Hover to fade</div>
<div id="mask1" class="mask"></div>
<div id="mask2" class="mask"></div>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}
.fader {
    border: 5px solid blue;
    background-color: white;
    top: 0;
    right: 0;
    position: fixed;
}
.mask {
    position: absolute;
    z-index: -10;
    min-width: 100%;
    top: 0;
    left: 0;
    background-size: cover;
}
#mask1 {
    background-image: url("http://test.coffeeshop.abcde.biz/cascara/img/bg_start.jpg");
}
#mask2 {
    background-image: url("http://test.coffeeshop.abcde.biz/cascara/img/bg_start2.jpg");
    display: none; /* Initial state */
}

JQuery的

/* Set images to full screen */
$(".mask").width($(window).width());
$(".mask").height($(window).height());

$(".fader").mouseover(function () {
    $("#mask2").stop().fadeIn(800);
});
$(".fader").mouseout(function () {
    $("#mask2").stop().fadeOut(800);
});

另请注意，我已为您的蒙版div设置了初始高度，如果客户端上没有JS，则应允许稍微优雅的降级。

css背景图像淡出和淡化

1 个答案:

HTML

CSS

JQuery的