Question

我把脚本放在一起改变图像的来源。我也尝试使用淡化方法淡出旧图像然后淡入新图像，但它看起来不那么好！我有一种方法可以改进jquery代码以实现更平滑的过渡吗？

         // Image gallery
     var lia = $("#buildingGalleryMenu ul li a");
     var mainImage = $("#mainImage");

     lia.bind('click', function() {
     // Fade out current image
     mainImage.fadeOut(500);
     // Change src
     mainImage.attr({src: $(this).attr('href') });
     // Fade in new image
     mainImage.fadeIn(500);
        return false;
    });

Answer 1

你正在逐渐淡出并消失。你必须从fadeOut回调内部淡出：

// get $(this);
var newImage = $(this); 
// Fade out current image
mainImage.fadeOut(500, function(){
    // callback, animation is finished
    // Change src
    mainImage.attr({src: newImage.attr('href') });
    // Fade in new image
    mainImage.fadeIn(500);
});

提示：您可能还想在mainImage.on（＆＃39; load＆＃39;）上启动fadeIn，这样会更好。

FadeOut和fadeIn图像不如我想要的那么平滑

1 个答案: