Question

这个问题有点奇怪，

我有一个网站，背景图片随着淡入/淡出过渡而改变

视频：http://www.screenr.com/ZCvs

标记：

        <div class="fondo" onclick="descargar(2,500);descargar(1,500);"></div>
        <div id="headerimgs">
            <div id="headerimg1" class="headerimg"></div>
            <div id="headerimg2" class="headerimg"></div>
        </div>
        <!-- Inicio Cabecera -->

CSS：

.headerimg { 
    background-position: center top; background-repeat: no-repeat; width:100%;position:absolute;height:100%;cursor:pointer; 
     -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

}
.headerimg img{ 
    min-width:100%; width:100%; height:100%;
}

    .fondo{
    position:absolute;
    z-index:1;
    width:100%;
    height:100%;
    cursor:pointer;
}

使用Javascript：

/*Gestion de pase de imágenes de fondo*/
$(document).ready(function() {
    /*controla la velocidad de la animación*/
    var slideshowSpeed = 3000;
    var transitionSpeed = 2000;
    var timeoutSpeed = 500;

    /*No tocar*/
    var interval;
    var activeContainer = 1;    
    var currentImg = 0;
    var animating = false;
    var navigate = function(direction) {
        // Si ya estamos navegando, entonces no hacemos nada!
        if(animating) {
            return;
        }
        currentImg++;
        if(currentImg == photos.length + 1) {
            currentImg = 1;
        }
        // Tenemos dos, uno en el que tenemos la imagen que se ve y otro d?nde tenemos la imagen siguiente
        var currentContainer = activeContainer;
        // Esto puedo optimizarlo con la funci?n modulo, y cambiar 1 y 2 por 0 y 1-> active = mod2(active + 1)
        if(activeContainer == 1) {
            activeContainer = 2;
        } else {
            activeContainer = 1;
        }
        // hay que decrementar el ?ndice porque empieza por cero
        cargarImagen(photos[currentImg - 1], currentContainer, activeContainer);
    };
    var currentZindex = -1;
    var cargarImagen = function(photoObject, currentContainer, activeContainer) {
        animating = true;
        // Nos aseguramos que el nuevo contenedor está siempre dentro del cajon
        currentZindex--;
        //if(currentZindex < 0) currentZindex=1;
        // Actualizar la imagen
        $("#headerimg" + activeContainer).css({
            "background-image" : "url(" + photoObject + ")",
            "display" : "block",
            "z-index" : currentZindex
        });
        // FadeOut antigua
        // Cuando la transición se ha completado, mostramos el header 
        $("#headerimg" + currentContainer).fadeOut(transitionSpeed,function() {
            setTimeout(function() {
                $("#headertxt").css({"display" : "block"});
                animating = false;
            }, timeoutSpeed);
        });
    };
    //ver la primera
     navigate("next");
    //iniciar temporizador que mostrará las siguientes



    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);

});

还有一个叠加div（类fondo）（高度和宽度100％）所以我可以在点击背景时检测到（我不能直接使用背景div，因为转换使它具有负z-index）

问题是这种转变会在所有白色文本中产生奇怪的效果

任何想法我错过了什么？

Answer 1

我不知道是什么原因造成了计算机上的故障，我无法重现：我在Windows 7上使用IE7,8,9，最新的Chrome和Firefox测试。请向我们提供有关您的设置的更多信息。您是否在测试自己的网站之前访问了支持3d的网站？这看起来像是一个显卡错误。您使用过最新的浏览器和显卡驱动程序吗？

另外，您可能需要考虑的一点是让您的淡入淡出动画更容易：在初次加载后，它会在Chrome中出现断言。

可以执行此操作的最简单动画是window.setInterval，执行以下代码：

function(){
    var container = $('#headerimgs');
    var current = container.children('div:visible:first');
    var next = (current.next().length > 1) ? current.next() : container.children('div:visible');

    current.fadeOut(300);
    next.fadeIn(300);
}

稍微改变一下持续时间，以获得您想要的确切效果。注意，你需要绝对定位.headerimg div，所以它们完全重叠。

Answer 2

跟踪您的淡入/淡出开始和结束...

可能是一个异步错误，其中有多个淡入/淡出正在发生或同时发生，可能已经错误地设置了......

这是更多的结合然后是答案，但是这些fadeIn / out的闪烁问题往往归结为此（从经验来看，90 +％的时间）。

同时检查您是否有鼠标悬停/鼠标中心CSS属性/事件。

道歉，我无法自己追踪它：因为我似乎无法重现错误。

随机：Chrome有时不会显示这些异常错误，因为它太快了。错误可能最终成为一个框架（或没有框架），这对于眼睛实际上是不可见的。同样对于真正快速的计算机。

背景图像淡出过渡在白色所有文本中产生奇怪的效果

2 个答案: