JQuery предотвратить перенаправление до окончания анимации

Question

Этот код работает отлично, за исключением случаев, когда вы нажимаете на ссылку. Страница перенаправляется до того, как jquery изменит визуальное оживление поля до нуля.Есть ли способ предотвратить перенаправление до тех пор, пока jquery не оживит поле до нуля?

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 () принимает функцию обратного вызова следующим образом:

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

Для полной документации, ознакомьтесь с (чрезвычайно полезными) документами jQuery: http://api.jquery.com/animate/

Answer 2

Остановить распространение события из li обработчика щелчка.

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

    e.stopPropagation();
}); 

Answer 3

Во-первых, ваш HTML-код недействителен.Поместите ссылки внутри элементов списка, а не наоборот.Настройте селектор соответствующим образом (.navigation li a).

Далее, теперь, когда вы устанавливаете событие для ссылки, а не для элемента списка, установите обработчик:

• Предотвратитьсобытие по умолчанию
• Добавление обратного вызова к анимации, чтобы при завершении анимации страница переходила на this.getAttribute('href').

Это должно сделать это.