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;
    });
});

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

1 个答案: