title: Change image from before to after (different sources) using jQuery UI slider
body: <p>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:</p>
  
  <pre><code>$(document).ready(function(){
     $('#slider').slider({
        slide: function(event, ui) {
           if(ui.value &gt;= 50) {
               $('#image-changer').fadeOut('slow');
               $('#image-changer').attr('src', 'images/after.jpg');
               $('#image-changer').fadeIn('slow');
           }
        }
     });
  });
  </code></pre>
  
  <p>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?</p>