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?

@j08691 nothing yet. Just know that the event that trigger is slide() so inside it I could change the IMG src using selector and attr method but for the fadeIn, fadeOut no idea so far — ReynierPM
@j08691 ok I've changed what I tested by now but doesn't work :( any help? — ReynierPM

Heather Gaye Heather Gaye · Accepted Answer · 2012-08-10T04:30:10

jQuery effects methods are run asynchronously. You need to "chain" these calls so they don't all run at the same time:

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

The second parameter accepted by fadeOut is a function that's called when the animation is complete.

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

1 Answers