Comment arrêter lien suivis jusqu'à l'après-jQuery .animer est-elle complète?

histoire: je suis en train de concevoir un site portfolio pour moi-même. sur sa page d'accueil, le logo est en avant et au centre, mais sur les sous-pages le logo est top & droite.

J'ai pensé que ce serait un bon repère visuel (en cliquant sur un lien vers une sous page) pour utiliser jQuery pour animer le mouvement du logo du centre vers le coin de la page.

la question: la sous-page se charge plus rapidement que l'animation est terminée.

question: est-il un moyen pour mettre en pause le lien suivant jusqu'à ce que une fois l'animation terminée?

Alors que c'est certainement un truc intéressant... toute sorte de temps entre le clic et l'action prévue la survenue de frustrer l'utilisateur. Dans ce cas, ils vont voir que le logo de la déplacer, l'avis de l'ensemble de la page est rafraîchie. Je sais que je serais ennuyé.

OriginalL'auteur jon | 2008-12-08

animation jquery

Vous avez également besoin de fausse déclaration ou d'empêcher l'action par défaut de l'ancre, cliquez sur dans le cas contraire, le navigateur il suffit de suivre le href. De toute façon convenu d'une démonstration en direct est mieux que 1000 mots.

Voir une démonstration en direct ici

e.g

 $('#myLink').click( function(ev){
   //prevent the default action of the event, this will stop the href in the anchor being followed
   //before the animation has started, u can also use return false;
   ev.preventDefault();
   //store a reference to the anchor tag
   var $self=$(this);
   //get the image and animate assuming the image is a direct child of the anchor, if not use .find
   $self.children('img').animate( {height:"10px"}, function(){
       //now get the anchor href and redirect the browser
       document.location = $self.attr('href');
   });
 });

OriginalL'auteur redsquare

1

Vous devriez être en mesure d'utiliser la fonction animate répertoriés ici: (jquery doc)

Il est dit que le rappel ne doit pas être exécuté jusqu'à ce que l'animation est terminée.

de rappel (en Option) la Fonction

Une fonction à exécuter chaque fois que l'animation est terminée, exécute une fois pour chaque élément d'animation contre.

OriginalL'auteur Cheese Daneish
1

Pas besoin d'écrire des fonctions, il suffit d'utiliser le haut-jQuery dans le cas de la méthode de l'événement.preventDefault() (ce qui est peut-être pas disponibles au moment où cette question a été posté).

http://api.jquery.com/event.preventDefault/

OriginalL'auteur Darrell

juste au cas où quelqu'un est intéressé dans cette variante...

je voulais le lien lui-même à être séparé de l'image, qui est animé, j'ai bricolé avec un peu le code et maintenant que j'ai ce travail.

le javascript/jquery:

print(" $(function()
    {
        $('#myLink').click( function(ev){
            //prevent the default action of the event, this will stop the href in the anchor being followed
            //before the animation has started, u can also use return false;
            ev.preventDefault();
            //store a referene to the anchor tag
            var $self=$('img#myImage');
            var $link=$('a#myLink');
            //get the image and animate
            ($self).animate( {height:"10px"}, function(){
                //now get the anchor href and redirect the browser
                document.location = $link.attr('href');
            });
        });
    });
");

le balisage:

print("<body>
<a id="myLink" href="http://www.google.co.uk">LINK</a>

<img id="myImage" src="http://www.derekallard.com/img/post_resources/jquery_ui_cap.png"/>
</body>");

cela dit, j'ai probablement moche avais le code. donc, toutes mes excuses.

OriginalL'auteur jon

0

Essayez ceci:
```
 $("#thelink").click( function(){
  $(this).animate( { animation stuff }, "medium", "easeboth", function(){
    document.location = $(this).attr('href');  
  });
 });
```
Ou lorsque le lien n'est pas animé, mais l'image (votre question):
```
 $("#thelink").click( function(){
  $("#theImg").animate( { animation stuff }, "medium", "easeboth", function(){
    document.location = $("thelink").attr('href');  
  });
 });
```
salut, désolé, mais je suis très javascript/jquery novice et je ne peux pas faire des têtes ou queues de cette partie de votre réponse: document.emplacement = $("thelink").attr('href'); j'ai essayé ceci, mais ne semble pas être de droite: document.emplacement = $("google.com").attr('href'); serait-il b possible de donner des ex?
ce ne sera pas arrêter le client en suivant le lien, à moins que vous empêcher l'action par défaut ou renvoyer false à partir du gestionnaire de clic

OriginalL'auteur Pim Jager
0

Je sais que vous avez probablement ne veulent pas entendre cela, mais ce que vous faites est un gros no-no, en termes de facilité d'utilisation.

Vous souhaitez créer un effet intéressant et ainsi ralentir votre expérience utilisateur. Aujourd'hui, les internautes sont très occupé et quand ils cliquent sur un lien qu'ils veulent pour y arriver le plus tôt possible. Vous allez perdre un pourcentage de visiteurs dans le processus et ne fera qu'aggraver beaucoup d'autres juste pour le plaisir d'un petit visuel de bonbons.

OriginalL'auteur allesklar
0

simplement retourner false dans la fonction de rappel.

Veuillez ajouter le code nécessaire pour répondre à la question.

OriginalL'auteur Dynamicnet
0

Pas tous les sites web sont les mêmes. Sur un site portfolio - parfaitement acceptable d'avoir peu d'animations et d'interface "cool", sur un outil de recherche de Google, si le logo animé de tous les temps avant que nous puissions utiliser la barre de recherche, il serait retardée.

OriginalL'auteur bigmadwolf

Vous devez vous connecter pour publier un commentaire.