jquery empêche de rediriger après animation

Question

Ce code fonctionne parfaitement sauf si vous cliquez sur un lien. La page est redirigée avant que jquery ne modifie visuellement la marge à zéro. Est-il possible d'empêcher la redirection jusqu'à ce que jquery remette la marge à zéro?

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() prend une fonction de rappel comme ceci:

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

Pour une documentation complète, consultez la (très utile) jQuery docs:

Answer 2

Tout d'abord, votre code HTML n'est pas valide. Mettez les liens dans les éléments de la liste, et non l'inverse. Ajustez votre sélecteur en conséquence (.navigation li a).

Ensuite, maintenant que vous configurez l'événement sur le lien plutôt que l'élément de liste, faites votre gestionnaire:

• Prévenir l'événement par défaut
• Ajouter un rappel à l'animation, de sorte que lorsque l'animation est sur la page va à this.getAttribute('href').

Cela devrait le faire.

Answer 3

Arrêtez la propagation d'événement à partir du gestionnaire de clics li.

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

    e.stopPropagation(); 
});