jquery slider - animating timeline
<p>I'm using the jquery slider function for a timeline</p>

<pre><code>$("#content-slider").slider({
    min: 0,
    max: 300,
    step: 1,
    change: handleSliderChange,
    //start:    getImageWidth,
    slide: handleSliderSlide
  });

  function handleSliderSlide(event, ui) {

  $("#content-scroll").prop({scrollLeft: ui.value * (maxScroll / 300) });

 if (ui.value &gt;= 7 &amp;&amp; ui.value &lt;= 13) {
  $('#marker_10').animate({opacity: 'hide'}, 100, function () { $(this).parent('div').animate({marginTop: '100px'}, {duration:1000, queue:false }).addClass('up').find('p').animate({opacity: 'show'} ) }) 
  }

if (ui.value &gt; 13 || ui.value &lt; 7 &amp;&amp; ($('div#container_10').hasClass('up'))) {
   $('div.up').stop(true)
   $('#container_10').removeClass('up').find('p').fadeOut('fast').end().animate({marginTop:'165px'}, {duration:500, complete:function() {$(this).find('img.marker').fadeIn() }, queue:false})
  }
}
</code></pre>

<p><a href="http://asla.dev.1over0.com/html/slider/bacardi_last.html" rel="nofollow">http://asla.dev.1over0.com/html/slider/bacardi_last.html</a> </p>

<p>It animates ok when I scroll left to right but when I scroll right to left then I get some issues where elements are fading out and displaying correctly 
any information would be appreciated; this is all done on the front end currently
Thank you</p>
