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

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

接下来，既然您要在链接而不是列表项上设置事件，请创建处理程序：

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

应该这样做。

Answer 3

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

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

    e.stopPropagation();
});

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

3 个答案: