Je veux animer 2 choses en même temps lorsque la souris planant quelque chose.
Par exemple, je veux changer la couleur d'arrière-plan de la boîte1 avec ID = "BOX1" et la position de la boîte2 avec ID = "BOX2" lorsque la souris planant une DIV avec ID = "déclencheur".
Mais je ne veux pas qu'ils animent dans une file d'attente, c'est-à-dire un après l'autre. Je veux qu'ils commencent à animer en même temps et à finir en même temps!
4 Réponses :
Vous pouvez simplement les exécuter dans une rangée, comme ceci: ceci utilise animations dans jQuery, .hover () pour animer une solution lors de la navigation et les animer retour lorsque vous partez. .stop () est juste pour prévenir l'accumulation de la file d'attente d'animation. Pour animer une couleur, vous aurez besoin d'une le plug-in couleur ou jQuery ui incluse aussi. .Amate () , est implémenté à l'aide de Seinterval () avec une minuterie de 13 ms, de sorte qu'ils se produiront en dehors du flux normal ... Les faire comme ci-dessus n'attend pas que le premier se termine, ils vont courir simultanément. < / p>
Et comment je peux les animer un par un? (pas simultanément)
@Mehran - Le Safe Safest Way est de faire la queue vous-même, comme celui-ci: @Nickcraver utilise-t-il la minuterie idem pour les animations en même temps? Ou il planifie différentes minuteries avec des appels distincts séparés pour chaque objet pour animer?
Lorsque la première animation commence, la prochaine ligne de code exécute sans attendre que l'animation se termine.
Pour faire deux choses à la fois: P>
$('#trigger').hover(function()
{
$('#box1').animate({ ... });
$('#box2').animate({ ... });
});
Merci pour votre réponse! ;-)
Vérifiez jquery.animate () docs . Il y a file d'attente Propriété:
File d'attente : Un booléen indiquant s'il faut placer l'animation dans la file d'attente d'effets. Si faux , l'animation commencera immédiatement.
Il anime des éléments individuels et la file d'attente est par élément :)
Voulez-vous s'il vous plaît expliquer plus!
S'il est vrai que les appels consécutifs d'animation donneront à l'apparition qu'ils courront en même temps, la vérité sous-jacente est que ce sont des animations distinctes qui fonctionnent très proches de parallèles.
Pour assurer que les animations fonctionnent bien à la MÊME TEMPS UTILISATION: P>
$('#trigger').hover(function() {
$('#box1').animate({..., queue: 'trigger-hover'});
$('#box2').animate({..., queue: 'trigger-hover'}).dequeue('trigger-hover');
});