jQuery cruz desvanecimiento dos imágenes en un bucle!

Question

Tengo problemas para encontrar la manera de obtener un fundido simple en el ciclo de fundido de salida para que funcione. Soy bastante nuevo en jQuery como quizás puedas decir. He tenido éxito, pero ahora me está tomando demasiado tiempo para hacer ejercicio, así que pensé que pediría ayuda.

Lo que quiero hacer:

Tengo dos imágenes, # img1 de Identificación y # img2. Quiero que la imagen 1 se desvanezca. Luego espere, digamos 6 segundos y luego desaparezca. Probé la función .wait pero solo detuvo el poco trabajo que tenía. Me las arreglé para obtener la primera imagen para desvanecerse y luego salir, pero sin esperar en el medio. Luego deseo comenzar a desvanecer la imagen 2 mientras la imagen 1 se está atenuando, luego la Imagen 2 para esperar y luego desaparecer, mientras que la imagen 1 se vuelve a fundir y se repite para siempre. Espero que tenga sentido.

$(document).ready(function(){ 
    $('#img1').hide() 
.load(function() { 
    $(this).fadeIn(4500) 
    .fadeOut(4500); 
    $('#img2').hide().wait(9000) 
    .load(function() { 
    $(this).fadeIn(4500) 
    .fadeOut(4500); 
}); 

Saludos, me está volviendo loco. Pd puedes intentar y dar una pequeña explicación a lo que está sucediendo en tu respuesta. Gracias

Answer 1

Editar 2+ años después: Hay mejores maneras de hacer esto ... así que ignore esta respuesta.

---

me gustaría probar una combinación de devoluciones de llamada y setTimeout. (Voy a basarme en la respuesta de Kobi, ya que publicó mientras estaba escribiendo.)

En CSS, otorgue a ambas imágenes una "pantalla: ninguna"; en lugar de configurarlos para ocultarlos al principio en jQuery. Luego en jQuery:

function imageOneFade(){ 
    $('#img1').fadeIn(2000, function(){ setTimeout("$('#img1').fadeOut(2000); imageTwoFade();",6000); }); 
} 

function imageTwoFade(){ 
    $('#img2').fadeIn(2000, function(){ setTimeout("$('#img2').fadeOut(2000); imageOneFade();",6000); }); 
} 

$(document).ready(function(){ 
    imageOneFade(); 
}); 

Esperemos que algo así trabaje.

La función setTimeout toma dos parámetros.

setTimeout(WHAT WILL HAPPEN, HOW LONG TO WAIT) 

Y las funciones fadeInn/Out pueden tener un segundo parámetro que se activará cuando el efecto finalice.

Answer 2

¿Por qué no utiliza una solución ya hecha como la Cycle plugin?

Tiene muchas más opciones de las que usted desea hacer.

Si realmente necesita hacer esto usted mismo, podría mirar el código fuente del complemento. No hice eso, pero creo que el codificador usa una combinación de la función animate (de jQuery) y la función setTimeout (de javascript puramente). Usando esas funciones debe hacer algo así como habilitar un temporizador por un período de tiempo, y cuando el tiempo está completo ejecuta la función animada configurando la opacidad de la imagen a 0 (para la ocultación de la imagen) y 1 (para la imagen que se muestra).

Answer 3

Puede utilizar una combinación de las devoluciones de llamada de jQuery y JavaScript setTimeout.
setTimeout se utiliza para retrasos, y las devoluciones de llamada se utilizan después de completar las animaciones (sin embargo, hay muchas otras devoluciones de llamada).

function startSlideshow(){ 
    $('#p1').fadeOut(2000, function(){ 
    setTimeout(function(){ 
     $('#p1').fadeIn(2000, startSlideshow) 
    },1000); 
    }); 
} 

$(document).ready(function(){ 
    startSlideshow(); 
}); 

verlo en acción: http://jsbin.com/ulugo

Answer 4

Aquí hay una presentación de diapositivas de cuatro imágenes que no usa la función setTimeout, sino que utiliza la función de demora.

<script> 
    function startSlideshow(){ 
    $("div.text_b1").fadeIn(1000).delay(10500).fadeOut(1500); //13000 
    $("div.text_b2").delay(13000).fadeIn(1500).delay(11000).fadeOut(1500); //27000 
    $("div.text_b3").delay(27000).fadeIn(1500).delay(11000).fadeOut(1500); //41000 
    $("div.text_b4").delay(41000).fadeIn(1500).delay(11000).fadeOut(1500, startSlideshow); //55000 
    } 

    $(document).ready(function(){ 
    startSlideshow(); 
    }); 
</script> 

verlo en acción http://www.erestaurantwebsites.com/

Answer 5

Basado en función de retardo(), aquí está la solución para el número de imágenes, si el rizo de las imágenes en números más grandes se necesita. Esto da un efecto de fundido cruzado B-> A (o elimina el + fadems/2 para un simple efecto fadeOutIn). Mente: las imágenes deben estar en posición: absoluta, importante; (ver ejemplo html).

jQuery:

function startSlideshow(){ 

    var dms = 2500; // image show duration in ms 
    var fadems = 750; // crossfade in ms 
    var imgnum = 5; // total number of images 
    var nms = 0; 

    // fadeInOut first image 
    $("#img1").fadeIn(fadems).delay(dms).fadeOut(fadems); 
    nms = nms + fadems*2 + dms- fadems/2; 

    // fadeInOut rest images 
    for (var i = 2; i<imgnum; i++){ 
     // remove +fadems/2 for fadeOut effect, instead of crossfade 
     $("#img"+i).delay(nms).fadeIn(fadems).delay(dms).fadeOut(fadems+fadems/2); 
     nms = nms + fadems*2 + dms - fadems/2; 
    } 
    // fadeInOut last image and start over 
     $("#img"+imgnum).delay(nms).fadeIn(fadems).delay(dms).fadeOut(fadems, startSlideshow); 
} 

startSlideshow(); 

HTML: nota: Identificación del siguiente imagen se rised por ++: # img1, img2 #, # img3 .... # img128 etc.

<style> 
    .crossfade { 
     /* image width and height */ 
     width: 160px; 
     height: 120px; 
     display: none; 
     position: absolute !important; 

    } 
</style> 

<div class="place_your_images_container_where_is_needed"> 

    <div id="img1" class = "crossfade" > 
     <img src="imageOne.png" /> 
    </div> 

    <div id="img2" class = "crossfade" > 
     <img src="image2.png" /> 
    </div> 

    <div id="img3" class = "crossfade" > 
     <img src="image3.png" /> 
    </div> 

    <div id="img4" class = "crossfade" > 
     <img src="imageFour.png" /> 
    </div> 

    <div id="img5" class = "crossfade" > 
     <img src="imageLast.png" /> 
    </div> 

</div> 

ps usa imágenes PNG transparentes para un mejor efecto.

Answer 6

Así es como lo haría con jQuery simple. Ver el fragmento de trabajo.

loopStart(); 
 

 
function loopStart() { 
 
    $("#image1").delay(2000).fadeOut("slow", function() { 
 
    loopTwo(); 
 
    }); 
 
}; 
 

 
function loopOne() { 
 
    $("#image1").fadeIn("slow", function() { 
 
    $("#image1").delay(2000).fadeOut("slow", function() { 
 
     loopTwo(); 
 
    }); 
 
    }); 
 
}; 
 

 
function loopTwo() { 
 
    $("#image2").fadeIn("slow", function() { 
 
    $("#image2").delay(2000).fadeOut("slow", function() { 
 
     loopOne(); 
 
    }); 
 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="image1" src="http://lorempixel.com/city/200/200"> 
 
<img id="image2" style="display:none;" src="http://lorempixel.com/people/200/200">