comment animer deux choses en même temps dans jquery

Je veux animer 2 choses en même temps lorsque la souris survole quelque chose. Par exemple, je veux changer la couleur de fond de box1 avec id = "box1" et la position de box2 avec id = "box2" quand la souris survole une div avec id = "trigger". Mais je ne veux pas qu'ils s'animent dans une file d'attente, c'est-à-dire l'un après l'autre. Je veux qu'ils commencent à animer en même temps et finissent en même temps!comment animer deux choses en même temps dans jquery

Source

2010-09-04 Mehran

Vous pouvez simplement les exécuter dans une rangée, comme ceci:

$("#trigger").hover(function() { 
    $("#box1").stop().animate({ backgroundColor: '#000000' }); 
    $("#box2").stop().animate({ top: "-20px" }); 
}, function() { 
    $("#box1").stop().animate({ backgroundColor: '#FFFFFF' }); //set it back 
    $("#box2").stop().animate({ top: "0px" });     //set it back 
});

Il utilise .hover() pour animer une façon en vol stationnaire, et les animer arrière au moment de quitter. Le .stop() est juste pour empêcher l'accumulation de file d'attente d'animation. Pour animer une couleur, vous aurez besoin de the color plugin ou de jQuery UI inclus.

Animations en jquery, .animate(), are implemented à l'aide setInterval() avec une minuterie 13ms, donc ils vont se produire en dehors du flux normal ... les faire comme ci-dessus n'attend pas le premier à terminer, ils courent en même temps.

Source

2010-09-04 13:04:28

et comment je peux les animer un par un? (pas simultanément) – Mehran

@Mehran - Le moyen le * plus sûr * est de vous mettre en file d'attente, comme ceci: http://jsfiddle.net/nick_craver/Cz62t/ –

@NickCraver Est-ce que jQuery utilise le * même * timer pour les animations exécutées dans le même temps? Ou il planifie des temporisations différentes avec des appels setInterval distincts pour chaque objet à animer? –

Lorsque la première animation démarre, la ligne de code suivante s'exécute sans attendre la fin de l'animation.

Donc, pour faire deux choses à la fois:

$('#trigger').hover(function() 
{ 
    $('#box1').animate({ ... }); 
    $('#box2').animate({ ... }); 
});

Source

2010-09-04 13:05:29

Merci pour votre réponse! ;-) – Mehran

Check out jQuery.animate() docs. Il est bien queue:

queue: un booléen qui indique si l'animation pour placer dans la file d'attente d'effets. Si false, l'animation commencera immédiatement.

Source

2010-09-04 13:08:56 Anpher

Cependant, il anime des éléments individuels, et la file d'attente est * per * element :) –

pourriez-vous nous en dire plus? – Mehran

S'il est vrai que les appels consécutifs à animer donnent l'impression qu'ils s'exécutent en même temps, la vérité sous-jacente est qu'ils sont des animations distinctes très proches du parallèle.

Pour assurer les animations sont en cours d'exécution en effet au même emploi du temps:

$('#trigger').hover(function() { 
    $('#box1').animate({..., queue: 'trigger-hover'}); 
    $('#box2').animate({..., queue: 'trigger-hover'}).dequeue('trigger-hover'); 
});

animations supplémentaires peuvent être ajoutés à la file d'attente « déclencheur vol stationnaire » et tous peuvent être initiés à condition que la dernière animation dequeue leur est.

Cheers, Anthony

Source

2017-02-11 22:57:15 Borgboy

comment animer deux choses en même temps dans jquery

Répondre

Questions connexes