Question

This code works perfectly except when you click on a link, The page is redirected before jquery has a change to visually animate the margin back to zero. Is there a way to prevent the redirect until after jquery animates the margin back to zero?

HTML

 <div id="sidebar">
  <div class="navigation">
  <ul>
    <a href="../../../index.html"><li><img src="dbs/images/home.png" title="" width="40" height="38" />به عقب</li></a>
    <a href="../../000_Movies/_assets/playlist.html"><li>فیلم ها</li></a>
    <a href="../../020_IAM/_assets/playlist.html"><li>وزارتخانه ها ایران زنده</li></a>
    <a href="../../080_Worship/_assets/playlist.html"><li>پرستش</li></a>
    <a href="../../330_Teen/_assets/playlist.html"><li>جوانان</li></a>
    <a href="../../300_Children/_assets/playlist.html"><li>کودکان</li></a>
    <a href="../../400_Testimony/_assets/playlist.html"><li>پزوهش ها</li></a>
    <a href="../../600_SOC/_assets/playlist.html"><li>دانشکده مسیح</li></a>
    <a href="../../750_Women/_assets/playlist.html"><li>زنان</li></a>
    <a href="../../800_BAHAM/_assets/playlist.html"><li>کلیپ های سری</li></a>

  </ul>
</div>
</div>

JS

$('.navigation a li').click(function () {
    $('.slider').animate({
        marginLeft: 0
    }, 500);
}); 

Answer 1

.animate() takes a callback function like so:

$('.navigation a li').click(function () {
    $('.slider').animate({
        marginLeft: 0
    }, 500,function() {
      //thing to do when you animation is finished e.g.
      location.href = 'http://redirect.to.url';
    });
}); 

For complete documentation, check out the (extremely useful) jQuery docs:
http://api.jquery.com/animate/