web-dev-qa-db-fra.com

Vitesse d'animation jQuery?

Final Edit : Le mur de texte ci-dessous peut être résumé en demandant simplement "puis-je spécifier la vitesse des animations en utilisant animate() de jQuery ? Tout ce qui est fourni est duration. "

~~

la animate() de jQuery semble implémenter l'assouplissement malgré mon utilisation de "linear". Comment puis-je faire en sorte que les deux boîtes restent ensemble jusqu'à ce que la première se termine à 250 pixels? Le second s'anime beaucoup plus rapidement car il a une distance plus longue à 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>

Alternativement y a-t-il un plugin de carrousel jQuery qui fait cela (mouvement de la souris basé sur l'endroit où vous passez la souris) pour que je n'ai pas à le réécrire? J'ai passé environ 20 minutes à en chercher un sur Google, mais je n'ai rien trouvé que j'aimais.

[~ # ~] eta [~ # ~] : L'exemple que j'ai fourni est très simple, mais le problème tel que je l'ai trouvé s'applique à un plus base de code complexe. (1) Allez ici. (2) Mettez la souris sur C. Viper, voyez la vitesse. (3) Mettez la souris sur Ryu, mais avant qu'elle ne se termine, déplacez votre souris au milieu du DIV (pour qu'elle s'arrête). (4) Remettez votre souris sur le côté gauche et voyez à quel point elle se déplace lentement.

Calculer les différences de vitesse et de distance semble ici insurmontable. Tout ce que j'essaie de faire est de recréer un bel effet que j'ai vu aujourd'hui sur un site ( this site ). Mais c'est Mootools, et je suis dans jQuery. = [

jqueryjquery-animate
17
Langdon

Pour la question mise à jour:
Tout d'abord, voici une démo fonctionnelle avec le comportement que vous souhaitez . Ce que nous faisons ici, c'est ajuster la vitesse en fonction de la quantité nécessaire pour se déplacer, car speed n'est pas une description précise, c'est la durée, se déplaçant sur une distance plus courte la même durée signifie un déplacement plus lent, nous devons donc adapter la durée à la distance à parcourir. Pour revenir en arrière, cela ressemble à ceci:

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

Depuis le <ul> défile avec une position négative à gauche, nous devons déplacer l'inverse de ce nombre de pixels pour revenir au début, nous utilisons donc -oldLeft (c'est actuelleft position).

Pour la direction avant, une approche très similaire:

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

Cela obtient la nouvelle propriété left, la fin étant la largeur du <ul> moins la largeur du <div> c'est dedans. Ensuite, nous soustrayons (c'est négatif donc ajoutez) que de la position actuelle left (également négative, donc inversez-la).

Cette approche donne à votre variable speed un tout nouveau sens, elle signifie maintenant "millisecondes par pixel" plutôt que la durée qu'elle faisait auparavant, ce qui semble être ce que vous recherchez. L'autre optimisation utilise ce <ul> sélecteur que vous aviez déjà, rendant les choses un peu plus rapides/plus propres dans l'ensemble.

Pour la question initiale:
Restez simple, la moitié du temps sur 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

23
Nick Craver

J'ai créé 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.

9
lukeshumard

linear spécifie uniquement que l'animation doit être réalisée par incréments linéaires et ne pas accélérer ou ralentir à la fin. Si vous voulez que les deux animations soient à la même vitesse, doublez simplement le temps nécessaire à l'animation, soit deux fois la distance:

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

quelque chose comme ça??

démo

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