jquery阻止重定向，直到动画之后

jquery prevent redirect until after animation

本文关键字：动画 之后 重定向 jquery      更新时间：2023-09-26

这段代码非常有效，除非你点击链接。在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);
});

.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/

首先，您的HTML无效。将链接放在列表项中，而不是相反。相应地调整选择器（.navigation li a）。

接下来，既然您在链接而不是列表项上设置了事件，那么就让您的处理程序：

  • 阻止默认事件
  • 向动画添加回调，以便在动画结束时页面转到this.getAttribute('href')

这样就可以了。

停止li点击处理程序的事件传播。

$('.navigation a li').click(function (e) {
    $('.slider').animate({
        marginLeft: 0
    }, 500);
    e.stopPropagation();
});
相关文章：