JQuery图片库 - 选定图像暂时更改布局

Question

我正在尝试创建一个简单的电子商务产品库。每当用户点击缩略图时，图像都能正确加载，但一秒钟后，布局将移动位置，因为图像与所选图像交换。有没有人知道一种方法来清理我的代码，如果这没有发生？我是Jquery的新手，所以我可能没有按照正确的方式去做。

$(function() { 
    $(".image").click(function() { 
    var image = $(this).attr("rel"); 
    $('#image').hide(); 
    $('#image').fadeIn('slow'); 
    $('#image').html('<img src="' + image + '"/>'); 
    return false; 
     }); 
    }); 

这里是一个Demo

Answer 1

不要隐藏#image，而不是里面的img。

而且我已经加入了fadeOut而不是隐藏起来，使它看起来更光滑。然后做fadeIn在fadeOut

$(function() { 
    $(".image").click(function() { 
     var image = $(this).attr("rel"); 
     $('#image img').fadeOut("slow", function(){ 
      $('#image').html('<img src="' + image + '"/>'); 
      $('#image').fadeIn('slow'); 
     }); 
     return false; 
    }); 
});