0

he implementado una función que cambia la propiedad background de una cabecera cada cierto tiempo, estoy intentado que la transición sea suave, mediante alguna función de jquery tipo fade in, pero no doy con la tecla ¿Alguien puede ayudarme?

Mi código JS es el siguiente:

            var body = $('.main-header .container');
    var backgrounds = [
      'url(http://imagen1.jpeg)', 
      'url(http://imagen2.jpg)'];
    var current = 0;

    function nextBackground() {
        body.css(
            'background',
        backgrounds[current = ++current % backgrounds.length]);

        setTimeout(nextBackground, 10000);
    }
    setTimeout(nextBackground, 10000);
    body.css('background', backgrounds[0]);
        
    

1 respuesta 1

1

Qué tal? Al estar usando setTimeout() le obliga a crear un fadeIn y un fadeOut. Lo que faltaría sería agregarlos. Usé colores para el ejemplo, pero igual aplica en imágenes.

HTML:

<div class="container">
      Cambios de colores con efecto
</div>

JS:

  var body = $(".container");
    var backgrounds = ["red", "blue","yellow"];
    var current = 0;
    
     function nextBackground(){
      body.fadeOut(3000,function(){
        body.css(
          "background",backgrounds[(current = ++current % backgrounds.length)]
        );
        body.fadeIn(3000,function(){
          setTimeout(nextBackground, 3000);
        });
      });
    }
    setTimeout(nextBackground, 3000);
    
    body.css("background", backgrounds[0]);

Si desea modificar aun mejor los efectos:https://www.anerbarrena.com/jquery-fadein-y-fadeout-3114/#:~:text=Sintaxis%20de%20jQuery%20fadeIn(),extra%C3%ADda%20de%20su%20web%20oficial.&text=Vemos%20que%20la%20funci%C3%B3n%20tiene,elemento%20con%20el%20queremos%20interactuar

Espero ser de ayuda, saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.