1 pièce(s) jointe(s)
Deux div différentes au sein de la fonction animate()
Bonjour, je suis en train de créer un mini-jeu éducatif pour l'école primaire ou mes enfants sont scolarisés. C'est un QCM et quand les élèves obtiennent la moyenne, il gagne une image, un poisson au format PNG, qu'il placent ensuite dans un aquarium virtuel.
J'ai réussi à animer le poisson aléatoirement avec la fonction animate ci-dessous
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| $(document).ready(function() {
animateDiv();
});
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $('#global').height() - 64;
var w = $('#global').width() - 80;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv() {
var $target = $('#a');
var newq = makeNewPosition($target.parent());
var oldq = $target.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('#a').animate({
top: newq[0],
left: newq[1]
}, speed, function() {
animateDiv();
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.05;
var speed = Math.ceil(greatest / speedModifier);
return speed;
} |
j'ai une div
Code:
1
2
|
<div id='a' ><img src="fish.png" /></div> |
Cela fonctionne à merveille et l'illusion est parfaite.
Pour plus de réalisme, je voudrais charger une div différente toutes les x secondes représentant le poisson dans un sens, puis dans l'autre, avec bien sur un PNG pour chaque état dans chaque div.
J'ai tenté avec la fonction fadeOut et FadeIn avec un delay, (j'ai bien entendu crée une autre fonction animate pour #a2)
Code:
1
2
3
|
<div id='a' ><img src="fish.png" /></div>
<div id='a2' ><img src="fish2.png" / |
>
Code:
1
2
3
4
5
| jQuery(document).ready(function(){
$("#a").delay(6000).fadeOut(500);
$("#a2").delay(6500).fadeIn(500);
$("#a2").delay(6500).fadeOut(500);
}) |
;
Mais les deux div sont malgré tout chargées, par contre elles disparaissent au bout d'un moment (ce qui est logique car je ne fais pas de boucle dans ma fonction)
Il y aurait il un moyen de combiner les deux choses, animate et fadeOut/In ?
L'idéal serait que dans la fonction animate, cela détecte quand le poisson se déplace vers la droite et charge la div #a, et quand il se déplace vers la gauche on charge la div #a2. ça à l'ai compliqué je sait (en tout cas pour mon niveau ! :) )
Pièce jointe 145639
