使用 jQuery UI 滑块将图像从之前更改为之后（不同来源）

Question

我正在尝试更改 Slider 幻灯片上的 IMG 源，但速度不快。这么快是什么意思？我可以在 slide() 事件上动态更改 IMG src 属性，但这很丑陋，我不希望这样。我喜欢为名为 before.jpg 的默认图像设置一个淡入淡出，为名为 after.jpg 的图像设置一个淡入淡出，必须在滑块结束时显示。我试过这段代码：

$(document).ready(function(){
   $('#slider').slider({
      slide: function(event, ui) {
         if(ui.value >= 50) {
             $('#image-changer').fadeOut('slow');
             $('#image-changer').attr('src', 'images/after.jpg');
             $('#image-changer').fadeIn('slow');
         }
      }
   });
});

但不起作用，因为图像 fadeIn 一次又一次，因为 ui.value 的值总是大于 50。有谁能帮我实现这一点吗？

Answer 1

jQuery 效果方法是异步运行的。您需要“链接”这些调用，这样它们就不会同时运行：

$('#image-changer').fadeOut('slow', 
  function() { 
    $('#image-changer').attr('src', 'images/after.jpg').fadeIn('slow'); 
  }
);

fadeOut 接受的第二个参数是动画完成时调用的函数。