使用load事件，以便在加载图像后开始淡入淡出，如下所示:

$(function() {
  $(".image").click(function() {
    var image = $(this).attr("rel");
    $('#image img').hide().one('load', function() {
      $(this).fadeIn(); 
    }).attr('src', image);
    return false;
  });
});

这使用load 处理程序api.jquery.com/one/"rel =" nofollow> .one() 表示不附加多个事件处理程序(每次添加一个)，并且在图像加载后会逐渐消失...请确保设置绑定load处理程序的src 之后，以便将其附加并准备就绪.即使从缓存中获取了图像，也可以使用.

---

或者，如果可能的话，更好的解决方案是只绑定一次该处理程序，如下所示:

$(function() {
  $('#image img').load(function() {
    $(this).fadeIn(); 
  });
  $(".image").click(function() {
    var image = $(this).attr("rel");
    $('#image img').stop().hide().attr('src', image);
    return false;
  });
});

然后，每次加载时，它都会再次淡入， .stop() 连续处理多次点击，使动画排队.

There's a gallery with a large image with thumbnails on the side. Click the thumbnail, the large image fades out, new one fades in (src getting called from the rel attribute of the link).

Problem: The old image fades out, re-appears, then jumps to the new image... I'm guessing the new image hasn't loaded yet, since it only happens the first time the image is loaded.

---

HTML

<div id="image"><img src="http://marilynmcaleer.com/images/BeachRoad-title.jpg" width="480" height="383" /></div>
<div id="thumbnails">
    <div class="thumbnail-homes"><a href="#" rel="http://marilynmcaleer.com/images/BeachRoad-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/homeportrait_thumbs/BeachHouse_thumb.jpg" width="136" height="90" alt="Beach House" /></a></div>
    <div class="thumbnail-nudes"><a href="#" rel="http://marilynmcaleer.com/images/ReducedFigure-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/nude thumbs/reducedfigure_thumb.jpg" width="136" height="90" alt="Patience" /></a></div>

    <div class="thumbnail-murals"><a href="#" rel="http://marilynmcaleer.com/images/BabyElephant-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/mural thumbs/babyelephant_thumb.jpg" width="136" height="90" alt="Baby Elephant" /></a></div>
    <div class="thumbnail-paintings"><a href="#" rel="http://marilynmcaleer.com/images/Charlevox-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/homeportrait_thumbs/Charlevouix_thumb.jpg" width="136" height="90" alt="Boat Shed" /></a></div>
</div>
<div class="clear"></div>

JQuery

    $(function() {
        $(".image").click(function() {                  // something with class "image" gets clicked and a function happens
            var image = $(this).attr("rel");                // variable (image) is defined to be the rel attribute of the link that was clicked
            $('#image img').hide();                             // hides the old big image
            $('#image img').attr('src', image);
            $('#image img').fadeIn();                       // animate to fade in 
        return false;
    });
});

Live Site: http://marilynmcaleer.com/

---

Any idea how to fix this?

Use the load event so the fade starts once the image is loaded, like this:

$(function() {
  $(".image").click(function() {
    var image = $(this).attr("rel");
    $('#image img').hide().one('load', function() {
      $(this).fadeIn(); 
    }).attr('src', image);
    return false;
  });
});

This binds the load handler using .one() as to not attach multiple event handlers (adding one every time), and will fade in once the image loads...make sure to set the src after binding the load handler so it's attached and ready to go. Even if the image is fetched from cache, this will work.

---

Alternatively, a bit better solution if possible is to bind that handler just once, like this:

$(function() {
  $('#image img').load(function() {
    $(this).fadeIn(); 
  });
  $(".image").click(function() {
    var image = $(this).attr("rel");
    $('#image img').stop().hide().attr('src', image);
    return false;
  });
});

Then every time it loads, it'll fade in again, the .stop() is to handle many clicks in a row, queuing up animations.