jquery - Change image from before to after (different sources) using jQuery UI slider

Question

I'm trying to change IMG source on Slider slide but not so fast. What I mean with so fast? I could change IMG src attribute on the fly on slide() event but this is ugly and I don't want that. I like to have a fadeOut for the default image called before.jpg and fadeIn for image called after.jpg which must be showed when the slider is at the end. I tried this code:

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

but doesn't work because the image fadeIn once and once because the ui.value always will have value greater than 50. Can any help me to achieve this?

Answer 1

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

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

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