jsPigs/scripts.js at master · LfifteenA/jsPigs · GitHub

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/*-------------------------------------
| Pigs Get Wings On Mouse In
-------------------------------------*/

/* Mouse Over Give Wings -------------------------------*/
// function declaration
function giveWings() {
  $('#stage .pigtopleft').attr('src', 'images/pig2wing.png');
  $('#stage .pigmiddle').attr('src', 'images/pig1wing.png');
  $('#stage .pigright').attr('src', 'images/pig3wings.png');
}

//function call
//GiveWings();

// event listener
  $('#stage').mouseover(giveWings);

/*-------------------------------------
| Pigs Lose Wings On Mouse Out
-------------------------------------*/

/* Mouse Out Back To Wingless Pigs -------------------------------*/
//Mouseout version of the above

// function declaration
function noWings() {
  $('#stage .pigtopleft').attr('src', 'images/pig2.png');
  $('#stage .pigmiddle').attr('src', 'images/pig1.png');
  $('#stage .pigright').attr('src', 'images/pig3.png');
}
// event listener
   $('#stage').mouseout(noWings);

 /*-------------------------------------
 | On Click, Pigs Fly!
 -------------------------------------*/
 // function declaration

 //Pig1
 function makePigsFly1() {
   $('#stage .pigtopleft')
     .stop(true)
     .animate({'left':'600px','top':'20px'}, 1000)
     .animate({'left':'600px','top':'400px'}, 1000)
     .animate({'left':'50px','top':'400px'}, 1000)
     .animate({'left':'50px','top':'20px'}, 1000);
 }

//Pig2
 function makePigsFly2() {
   $('#stage .pigmiddle')
     .stop(true)
     .animate({'left':'10px','top':'10px'}, 1000)
     .animate({'left':'550px','top':'10px'}, 1000)
     .animate({'left':'500px','top':'350px'}, 1000)
     .animate({'left':'207px','top':'220px'}, 1000);
 }


//pig3
 function makePigsFly3() {
   $('#stage .pigright')
     .stop(true)
     .animate({'left':'130px','top':'175px'}, 1000)
     .animate({'left':'130px','top':'375px'}, 1000)
     .animate({'left':'390px','top':'305px'}, 1000)
     .animate({'left':'580px','top':'115px'}, 1000);
 }
 //function call
 //none?


 // event listener
 //On click, each flies together
$('#stage').click(makePigsFly1);
$('#stage').click(makePigsFly2);
$('#stage').click(makePigsFly3);