jquery délai d'un lien de suivi

J'ai un court css animation que je veux jouer avant un lien est suivi (une carte qui s'est abattu sur la page de la charge se précipite après cliquez sur). Actuellement, cependant, la page appelée charge trop rapidement. Je veux être en mesure de brièvement retarder le href d'être suivie.

Voici ce que j'ai obtenu:

$(document).ready(function() {
    $("#card").css("top","0px");
    $(".clickit").click(function() {
        $("#card").css("top","-500");
    });
});

La première ligne siffle la carte au chargement de la page. Après c'est le clic d'appel qui modifie le CSS, mais comme je l'ai dit il doit y avoir une sorte de retard là parce que la page se charge immédiatement, au lieu de l'animation. Le CSS qui est modifiée ressemble à ceci:

#card {
  width: 400px;
  height: 500px;
  position: relative;
  top: -500px;
  -webkit-transition:all .5s;
}

(oui, je sais que c'est webkit-seulement pour le moment)

C'est un problème très similaire à cette question à partir de 2008, mais je sais que jQuery a été considérablement mis à jour depuis, alors je voulais voir si il y avait une solution plus moderne.

Merci!

  • Pourquoi voulez-vous de ralentir l'expérience de l'utilisateur? En tant qu'utilisateur, ce serait d'obtenir ennuyeux très rapidement...
  • compris et retenu. juste de l'humour moi...
  • N'avez-vous pas lu La Charge de la Brigade Légère?
  • Aye, c'était une lecture obligatoire dans les AP de l'anglais en lycée je crois, avec l'ensemble de l'histoire.
  • Eh bien, il y a votre réponse. ;o)
InformationsquelleAutor Dan Sinker | 2010-06-13
  1. 11

    Depuis que vous utilisez .css() et -webkit-transition:, vous aurez besoin d'utiliser un setTimeout() pour retarder le nouvel emplacement.

    Essayer le live exemple: http://jsfiddle.net/2WJH9/

    $(document).ready(function() {
    $("#card").css("top","0px");
    $(".clickit").click(function() {
        $("#card").css("top","-500px");  //Added px to make it work, 
                                         //  or get rid of quotes -500
        var href = $(this).attr('href');

             //Delay setting the location for one second
        setTimeout(function() {window.location = href}, 1000);
        return false;
    });
});​

    La setTimeout() le délai de window.location d'être ensemble pendant 1 seconde (1 000 millisecondes). Si vous souhaitez faire correspondre les .5 secondes de -webkit-transition:, puis le modifier à 500.

    • MERCI!!!!!! Cela a parfaitement fonctionné.
    InformationsquelleAutor user113716
  2. 5

    Vous pouvez preventDefault() sur le lien, puis utiliser la fonction animate de jQuery pour effectuer votre CSS transitions, en suivant le lien une fois l'animation terminée.

    $('.clickit').click(function(e) {
    e.preventDefault();
    href = $(this).attr('href');
    $('#card').animate( { top: '-500px' }, 500, function() {
        window.location = href;
    });
});
    • D'accord. Vous n'avez pas besoin de setTimeout, il suffit d'utiliser la fonction de rappel lorsque l'animation est terminée, Merci à vous, au Hasard de citoyen!
    InformationsquelleAutor ThrivingKings
  3. 2

    C'est un problème très similaire à cette question à partir de 2008, mais je sais que jQuery a été considérablement mis à jour depuis, alors je voulais voir si il y avait une solution plus moderne.

    Nope, toujours la même réponse. D'annuler l'événement, puis les charger sur l'emplacement vous-même plus tard.

    • Merci. Alors, voici ma tentative de s'adapter... mais ça ne fonctionne pas. Encore vient de charger le href tout de suite: $(".clickit").cliquez sur(function(ev) { ev.preventDefault(); var $self=$(this); $self.css("top","-800"); document.emplacement = $self.attr('href'); });
    InformationsquelleAutor T.J. Crowder