jQuery Vitesse de l'Animation?

Montage Final: Le mur de texte ci-dessous peut se résumer simplement en demandant: "puis-je définir la vitesse des animations à l'aide de jQuery animate()? Tout ce qui est fourni est duration."

~~

de jQuery animate() semble en œuvre de l'assouplissement malgré mon utilisation de "linéaire". Comment puis-je obtenir les deux boîtes de rester ensemble jusqu'à ce que la première est terminée @ 250px? Le deuxième anime beaucoup plus rapidement car il a une plus longue distance à parcourir.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function()
    {
        $('#a').animate({left: '250px'}, 1000, 'linear');
        $('#b').animate({left: '500px'}, 1000, 'linear');
    });
</script>

<div id="a" style="background-color: red; position: relative; width: 50px; height: 50px;"></div>
<br/><br/>
<div id="b" style="background-color: red; position: relative;width: 50px; height: 50px;"></div>

Sinon est-il un jQuery carrousel plugin qui fait cela (mouvements de la souris en fonction de l'endroit où vous êtes, passez la souris) donc je n'ai pas à le réécrire? J'ai passé environ 20 minutes à chercher sur Google, mais ne pouvait pas trouver quelque chose que j'ai aimé.

ETA: L'exemple que j'ai fourni est très simple, mais le problème comme je l'ai trouvé, il est appliqué à un code plus complexe de base. (1) Rendez-vous ici. (2) Mettre la souris sur C. Viper, voir la vitesse. (3) Mettre la souris sur Ryu, mais avant la fin, déplacez votre souris vers le milieu de la DIV (il s'arrête). (4) Mettez votre souris sur le côté gauche et de voir comment tout à fait lent, il se déplace.

Calculer les différences dans la vitesse et la distance paraît insurmontable ici. Tout ce que je suis en train de faire, c'est de recréer un joli effet j'ai vu un site utilisent aujourd'hui (ce site). Mais c'est Mootools, et je suis en jQuery. =[

lien (1) ne fonctionne pas

OriginalL'auteur Langdon | 2010-07-07

  1. 21

    Pour la mise à jour de question:

    Tout d'abord, voici un travail de démonstration avec le comportement que vous souhaitez. Ce que nous faisons ici c'est le réglage de la vitesse en fonction de la quantité nécessaire de se déplacer, parce que speed n'est pas une description précise, c'est la durée, le déplacement d'une distance plus courte au cours de la même durée signifie un ralentissement de la déplacer, de sorte que nous devons à l'échelle de la durée avec la distance que nous avons besoin de bouger. Pour se déplaçant vers l'arrière, il ressemble à ceci:

    var oldLeft = ul.offset().left;
ul.animate({left: 0}, -oldLeft * speed, 'linear');

    Depuis le <ul> défile avec un négatif de la position de gauche, nous devons aller de l'inverse du nombre de pixels, pour en revenir au début, nous sommes donc à l'aide de -oldLeft (c'est actuel left position).

    Pour le sens de la marche, une approche très semblable:

    var newLeft = divWidth - ulWidth,
    oldLeft = ul.offset().left;
ul.animate({left: newLeft + 'px'}, (-newLeft + oldLeft) * speed, 'linear');

    Cela devient la nouvelle left propriété, la fin étant la largeur de la <ul> moins la largeur de la <div>. Puis nous soustraire (il est négatif, il faut donc ajouter) que de l'actuel left position (aussi négatif, de sorte que l'inverser).

    Cette approche donne à votre speed variable d'un tout nouveau sens, il signifie maintenant "millisecondes par pixel" plutôt que de la durée il l'a fait avant, ce qui semble être ce que vous êtes après. L'autre optimisation est mis en cache à l'aide de <ul> sélecteur vous déjà eu, rendre les choses un peu plus rapide/plus propre dans l'ensemble.

    Pour la question d'origine:

    Keep it simple, juste la moitié du temps la moitié de la distance, comme ceci:

    $(function() {
    $('#a').animate({left: '250px'}, 500, 'linear');
    $('#b').animate({left: '500px'}, 1000, 'linear');
});

    Vous pouvez essayer une démo ici

    Sérieusement, c'est nécessaire? L'exemple que j'ai fourni a été extrêmement simple, de sorte que cette suggestion est bien.. Mais je vais avoir ce problème sur un ensemble plus complexe de code, mais d'essayer d'ajouter ce calcul pour que le code serait plus complexe que ce que j'ai déjà écrit. =[
    Je suis sûr que nous pouvons venir avec une solution simple au problème, ce qui est différent dans le code? Pouvez-vous animer à la fois avec une animation, puis dans le rappel, le coup d'envoi de la deuxième jambe qui ne concerne qu'un sous-ensemble d'éléments, comme #b dans ce cas? Quelque chose comme ceci: jsfiddle.net/BVN7n/2
    J'ai mis à jour la la question afin de montrer ma véritable intention. Un exemple simple est plus facile à obtenir mon point de vue. Merci pour les efforts déployés jusqu'à présent.
    Nick - Désolé, a supprimé mon commentaire après que je vous ai vu a laissé un commentaire pour Reigel.
    Voici une version qui fait ce que vous avez besoin, le réglage de la vitesse correspondant au nombre de pixels de déplacement: jsfiddle.net/SF6yc

    OriginalL'auteur Nick Craver

  2. 9

    J'ai fait un plugin qui fait exactement ce que vous voulez. Vous pouvez utiliser Supremation pour spécifier la vitesse de l'animation, par opposition à la durée.

    Wow, c'est exactement ce que je cherchais. Je ne peux pas upvote ce assez. Je envisageait d'écrire moi-même ce plugin, merci pour me sauver du temps. 🙂
    Le lien est mort....
    Voici le projet sur GitHub (github.com/lukeshumard/supremation) car j'ai oublié de renouveler le nom de domaine. Oups.

    OriginalL'auteur lukeshumard

  3. 2

    linéaire précise seulement que l'animation doit être fait dans les linéaires d'échelon et de ne pas accélérer ou de ralentir qu'elle est terminée. Si vous voulez les deux animations à la même vitesse, il suffit de doubler le temps qu'il faut pour l'animation qui est deux fois la distance:

    $('#a').animate({left: '250px'}, 1000, 'linear');
$('#b').animate({left: '500px'}, 2000, 'linear');
    J'ai mis à jour ma question en montrant ce que je suis vraiment en train de faire. Calcul de la différence de vitesse/pixels semble impossible pour mon vrai code.

    OriginalL'auteur Mike Sherov

  4. 0

    quelque chose comme ça???

    démo

    $('#a,#b').animate({left: '250px'}, 1000, 'linear',
    function(){
       $('#b').animate({left: '500px'}, 1000, 'linear');   
    }
);
    Ce serait de l'animation pour le deuxième après la première est terminée...je crois que l'OP veut pour rester ensemble jusqu'à ce que la première est terminée, puis #b de continuer à animer le restant 250px.
    mon démo et le vôtre sont juste presque la même chose... prendre un coup d'oeil jsfiddle.net/BFhm6
    J'ai complètement raté la #b dans le premier sélecteur, oui cela fonctionne très bien 🙂

    OriginalL'auteur Reigel