переходы fadeInOut фонового изображения производят странный эффект на белом тексте - PullRequest
Новая
       24

переходы fadeInOut фонового изображения производят странный эффект на белом тексте

6 голосов
/ 13 декабря 2011

Ну, эта проблема довольно странная,

У меня есть веб-сайт, на котором фоновое изображение меняется с переходом fadeIn / Out

Видео: http://www.screenr.com/ZCvs

Веб в действии: http://toniweb.us/gm

Разметка: 

        <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-индекс)

проблема в том, что этот переход производит странный эффект во всех белых текстах

Есть идеи, что мне не хватает?

Ответы [ 2 ]

4 голосов
/ 20 декабря 2011

Я не знаю, что вызвало глюки на вашем компьютере, я не могу воспроизвести его: я тестирую с использованием IE7,8,9, последних версий Chrome и Firefox на Windows 7. Пожалуйста, предоставьте нам больше информации о вашей настройке.Заходили ли вы на сайт с поддержкой 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 абсолютно, чтобы они полностью перекрывались.

1 голос
/ 22 декабря 2011

Отслеживание начала и конца постепенного появления / исчезновения ...

Скорее всего, это может быть асинхронная ошибка, при которой происходит более одного затухания / исчезновения или происходит одновременно, что могло быть установлено неправильно ...

Это больше конъюнктуры, чем ответ , однако эти мерцающие проблемы с fadeIn / out, как правило, сводятся к этому (из опыта, 90 +% времени).

Также проверьте, есть ли у вас какие-либо свойства / события мыши при наведении курсора мыши.

Извиняюсь за то, что не могу отследить это сам: поскольку, похоже, я тоже не могу воспроизвести ошибку.

Случайно: Chrome иногда не отображает эти асинхронные ошибки, потому что он слишком быстрый. Ошибка может оказаться фреймом (или его отсутствием), который фактически невидим для глаз. Аналогично для действительно быстрых компьютеров.

...