jqueryはアニメーション後までリダイレクトを防止します

Question

このコードは、リンクをクリックする以外は完全に機能します。jqueryが変更されてマージンを0に戻す前にページがリダイレクトされます。 jqueryの後にマージンを0に戻すまでリダイレクトを防ぐ方法はありますか？ （非常に便利）チェックアウト、jQueryの完全なドキュメントについては

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

：

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は（）ので、のようなコールバック関数をとりますdocs：

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