jquery - wp_enqueue_script - wp enqueue style example

jQuery Change Image src con Fade Effect

Question

Intento crear un efecto donde haga clic en una imagen en miniatura, y el enlace a la miniatura reemplazará la imagen principal, pero se desvanecerá. Este es el código que estoy usando actualmente:

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery").fadeIn(400, function() {
        $(".boat_listing .mainGallery").attr(''src'',$imgURL);
    });
});

Esto funciona y reemplaza la imagen sin un efecto de fundido. ¿Qué debo cambiar para que el efecto fadeIn funcione?

Answer 1

Creo que en lugar de utilizar FadeIn y fadeOut, es mejor utilizar la funcionalidad de fadeTo ya que fadeIn y fadeOut crearon un espacio de tiempo entre ellos por unos pocos microsegundos.

He usado el código anterior de Sylvain: gracias a él

$("#link").click(function() {

  $("#image").fadeTo(1000,0.30, function() {
      $("#image").attr("src",$("#link").attr("href"));
  }).fadeTo(500,1);
  return false;
});

Answer 2

No puedes desvanecerte en algo que ya está en 100% alpha :)

En otras palabras, puedes desvanecerlo o esconderlo y luego fundirlo.

Hice este ejemplo, básicamente, lo oculto y luego lo desvanezco:

http://jsfiddle.net/uGFMt/

Answer 3

Reproduje las muestras dadas arriba. Da un parpadeo extraño, que encontré que espera que la imagen se cargue después de que su opacidad se restaure a 1. Modifiqué el código con Sandeep.

$("#link").click(function() {

$("#image").fadeTo(1000,0.30, function() {
  $("#image").attr("src",$("#link").attr("href"));
  $("#image").on(''load'', function(){
    $("#image").fadeTo(500,1);
  });
 });
 return false;
});`

Answer 4

fadeOut() debe hacer que sea fadeOut() u ocultarlo.

Prueba esto :

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery")
        .fadeOut(400, function() {
            $(".boat_listing .mainGallery").attr(''src'',$imgURL);
        })
        .fadeIn(400);
});

Debería fadeOut la imagen, luego cambiar el src cuando está oculta, y luego fadeIn .

Aquí hay un ejemplo jsFiddle.