使用jQuery UI滑块从之前更改图像(不同来源)

时间:2012-08-10 02:45:34

标签: jquery jquery-ui jquery-ui-slider

我正在尝试在Slider幻灯片上更改IMG源但不是那么快。我的意思如此之快?我可以在slide()事件上动态更改IMG src属性,但这很难看,我不希望这样。我喜欢有一个名为before.jpg的默认图像的fadeOut和一个名为after.jpg的图像的fadeIn,它必须在滑块结束时显示。我试过这段代码:

$(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');
         }
      }
   });
});

但不起作用,因为图像淡入一次,因为ui.value的值总是大于50.有没有人可以帮我实现这个目标?

1 个答案:

答案 0 :(得分:0)

jQuery效果方法是异步运行的。您需要“链接”这些调用,以便它们不会同时运行:

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

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