Ajax Loader
HTML 
<div class="step step-0">
1
<div class="step step-0">
2
  <h1>27 Card Trick</h1>
3
  <p>Hello stranger. In this pen I wanna show you a pretty cool magic trick. It's a mathematical card trick.</p>
4
  <p>Follow the steps as instructed. You'll be impressed.</p>
5
  <br />
6
  <p>Please give me your favorite number between 1 and 27 (you should remember it till the end):</p>
7
  <p><input class="fav_number_range" type="range" min="1" value="1" max="27" /></p>
8
  <p class="fav_number">1</p>
9
  <button>Start the trick!</button>
10
</div>
11
<div class="step step-1">
12
  <h1>Step 1</h1>
13
  <p>In this step you need to choose one of these 27 cards. You can choose by clicking on the card. Please make sure to remember this card! Your card will not be saved. If you don't trust me look at the javascript.</p>
14
  <div class="cards">
15
    <div class="card black">A&spades;</div>
16
    <div class="card red">A&hearts;</div>
17
    <div class="card black">A&clubs;</div>
18
    <div class="card red">A&diams;</div>
19
    <div class="card black">2&spades;</div>
20
    <div class="card red">2&hearts;</div>
21
    <div class="card black">2&clubs;</div>
22
    <div class="card red">2&diams;</div>
23
    <div class="card black">3&spades;</div>
24
    <div class="card red">3&hearts;</div>
25
    <div class="card black">3&clubs;</div>
26
    <div class="card red">3&diams;</div>
27
    <div class="card black">4&spades;</div>
28
    <div class="card red">4&hearts;</div>
29
    <div class="card black">4&clubs;</div>
30
    <div class="card red">4&diams;</div>
31
    <div class="card black">5&spades;</div>
32
    <div class="card red">5&hearts;</div>
33
    <div class="card black">5&clubs;</div>
34
    <div class="card red">5&diams;</div>
35
    <div class="card black">6&spades;</div>
36
    <div class="card red">6&hearts;</div>
37
    <div class="card black">6&clubs;</div>
38
    <div class="card red">6&diams;</div>
39
    <div class="card black">7&spades;</div>
40
    <div class="card red">7&hearts;</div>
41
    <div class="card black">7&clubs;</div>
42
    <br style="clear: both;" />
43
  </div>
44
</div>
45
<div class="step step-2">
46
  <h1>Step 2</h1>
47
  <p>This step is the same as the following steps 3 and 4. The cards are randomly shuffled by the javascript. There are now 3 rows of cards. Each pile has 9 cards. There's also a button right next to each pile. Please look for your card and click on the button right next to that pile. DON'T cheat, otherwise the trick won't work.</p>
48
  <div class="pile pile-1">
49
    <button data-pile="0">In this pile</button>
50
    <br style="clear: both;" />
51
  </div>
52
  <div class="pile pile-2">
53
    <button data-pile="1">In this pile</button>
54
    <br style="clear: both;" />
55
  </div>
56
  <div class="pile pile-3">
57
    <button data-pile="2">In this pile</button>
58
    <br style="clear: both;" />
59
  </div>
60
</div>
61
<div class="step step-3">
62
  <h1>Step 3</h1>
63
  <p>This step is the same as the steps 2 and 4. There are now 3 rows of cards. Each pile has 9 cards. There's also a button right next to each pile. Please look for your card and click on the button right next to that pile. DON'T cheat, otherwise the trick won't work.</p>
64
  <div class="pile pile-1">
65
    <button data-pile="0">In this pile</button>
66
    <br style="clear: both;" />
67
  </div>
68
  <div class="pile pile-2">
69
    <button data-pile="1">In this pile</button>
70
    <br style="clear: both;" />
71
  </div>
72
  <div class="pile pile-3">
73
    <button data-pile="2">In this pile</button>
74
    <br style="clear: both;" />
75
  </div>
76
</div>
77
<div class="step step-4">
78
  <h1>Step 4</h1>
79
  <p>This step is the same as the steps 2 and 3. There are now 3 rows of cards. Each pile has 9 cards. There's also a button right next to each pile. Please look for your card and click on the button right next to that pile. DON'T cheat, otherwise the trick won't work.</p>
80
  <div class="pile pile-1">
81
    <button data-pile="0">In this pile</button>
82
    <br style="clear: both;" />
83
  </div>
84
  <div class="pile pile-2">
85
    <button data-pile="1">In this pile</button>
86
    <br style="clear: both;" />
87
  </div>
88
  <div class="pile pile-3">
89
    <button data-pile="2">In this pile</button>
90
    <br style="clear: both;" />
91
  </div>
92
</div>
93
<div class="step step-5">
94
  <h1>Step 5</h1>
95
  <p>After 3 rounds of dealing out the cards into 3 piles the order of the cards has changed. If we hold the deck of cards upside down and start dealing out the cards to reveal them we will count each card, starting with 1. What was your favorite number again? <span class="your_number"></span>? Have a look at the card of your favorite number. Is that your card?</p>
96
  <p>There is no trick like saving your choice at the beginning. It's a mathemtical card trick.</p>
97
  <div id="final_cards"></div>
98
</div>
99
 
100
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
1
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
2
 
3
* {
4
  border: 0;
5
  padding: 0;
6
  margin: 0;
7
}
8
 
9
html, body {
10
  min-height: 100%;
11
}
12
 
13
body {
14
  background-color: #333;
15
  font-family: 'Roboto';
16
  font-weight: 400;
17
  font-size: 16px;
18
  line-height: 24px;
19
}
20
 
21
h1 {
22
  font-weight: 300;
23
  font-size: 30px;
24
  line-height: 45px;
25
}
26
 
27
p {
28
  max-width: 50%;
29
  margin: 0 auto;
30
}
31
 
32
button {
33
  padding: 5px 10px;
34
  font-size: 16px;
35
  border-radius: 3px;
36
  cursor: pointer;
37
  float: left;
38
  margin-top: 30px;
39
  margin-right: 15px;
40
}
41
.step {
42
  padding: 20px;
43
  text-align: center;
44
  display: none;
45
  &:nth-child(odd) {
46
    background: #333;
47
    color: #ffffff;
48
    button {
49
      background-color: aquamarine;
50
      color: #333;
51
    }
52
  }
53
  &:nth-child(even) {
54
    background: aquamarine;
55
    color: #333;
56
    button {
57
      background-color: #333;
58
      color: #ffffff;
59
    }
60
  }
61
  &.step-0 {
62
    display: block;
63
    button {
64
      float: none;
65
      margin: 0;
66
    }
67
  }
68
}
69
 
70
.pile {
71
  max-width: 50%;
72
  margin: 20px auto;
73
}
74
 
75
.cards {
76
  margin: 0 auto;
77
  max-width: 420px;
78
}
79
 
80
.card {
81
  font-size: 20px;
82
  font-weight: bold;
83
  background: snow;
84
  cursor: pointer;
85
  width: 50px;
86
  height: 75px;
87
  border-radius: 10px;
88
  margin: 5px;
89
  float: left;
90
  text-align: center;
91
  line-height: 75px;
92
  box-shadow: 2px 2px 1px #666, inset 2px 2px 1px #aaa;
93
  &.red {
94
    color: #ff0000;
95
  }
96
  &.black {
97
    color: #000000;
98
  }
99
}
100
 
101
#final_cards {
102
  width: 100px;
103
  margin: 0 auto;
104
  div {
105
    width: 50px;
106
    display: inline-block;
107
    line-height: 75px;
108
    text-align: center;
109
    margin: 0px 0px 5px 0px;
110
    &:nth-child(1) {
111
      color: #333;
112
      font-size: 20px;
113
    }
114
  }
115
}
116
 
117
.your_number {
118
  color: #f00;
119
  font-weight: bold;
120
}
 
JavaScript 
jQuery.fn.outerHTML = function() {
1
jQuery.fn.outerHTML = function() {
2
  return jQuery('<div />').append(this.eq(0).clone()).html();
3
};
4
 
5
function Shuffle(o) {
6
  for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
7
  return o;
8
};
9
 
10
function orderCards(pile, cards, belongs) {
11
  var tmp_cards = new  Array();
12
  tmp_cards = [].concat(cards);
13
  switch(pile) {
14
    case 0:
15
      switch(belongs) {
16
        case "top":
17
          cards[0] = tmp_cards[0];
18
          cards[1] = tmp_cards[3];
19
          cards[2] = tmp_cards[6];
20
          cards[3] = tmp_cards[9];
21
          cards[4] = tmp_cards[12];
22
          cards[5] = tmp_cards[15];
23
          cards[6] = tmp_cards[18];
24
          cards[7] = tmp_cards[21];
25
          cards[8] = tmp_cards[24];
26
          cards[9] = tmp_cards[1];
27
          cards[10] = tmp_cards[4];
28
          cards[11] = tmp_cards[7];
29
          cards[12] = tmp_cards[10];
30
          cards[13] = tmp_cards[13];
31
          cards[14] = tmp_cards[16];
32
          cards[15] = tmp_cards[19];
33
          cards[16] = tmp_cards[22];
34
          cards[17] = tmp_cards[25];
35
          cards[18] = tmp_cards[2];
36
          cards[19] = tmp_cards[5];
37
          cards[20] = tmp_cards[8];
38
          cards[21] = tmp_cards[11];
39
          cards[22] = tmp_cards[14];
40
          cards[23] = tmp_cards[17];
41
          cards[24] = tmp_cards[20];
42
          cards[25] = tmp_cards[23];
43
          cards[26] = tmp_cards[26];
44
          break;
45
        case "middle":
46
          cards[0] = tmp_cards[1];
47
          cards[1] = tmp_cards[4];
48
          cards[2] = tmp_cards[7];
49
          cards[3] = tmp_cards[10];
50
          cards[4] = tmp_cards[13];
51
          cards[5] = tmp_cards[16];
52
          cards[6] = tmp_cards[19];
53
          cards[7] = tmp_cards[22];
54
          cards[8] = tmp_cards[25];
55
          cards[9] = tmp_cards[0];
56
          cards[10] = tmp_cards[3];
57
          cards[11] = tmp_cards[6];
58
          cards[12] = tmp_cards[9];
59
          cards[13] = tmp_cards[12];
60
          cards[14] = tmp_cards[15];
61
          cards[15] = tmp_cards[18];
62
          cards[16] = tmp_cards[21];
63
          cards[17] = tmp_cards[24];
64
          cards[18] = tmp_cards[2];
65
          cards[19] = tmp_cards[5];
66
          cards[20] = tmp_cards[8];
67
          cards[21] = tmp_cards[11];
68
          cards[22] = tmp_cards[14];
69
          cards[23] = tmp_cards[17];
70
          cards[24] = tmp_cards[20];
71
          cards[25] = tmp_cards[23];
72
          cards[26] = tmp_cards[26];
73
          break;
74
        case "bottom":
75
          cards[0] = tmp_cards[2];
76
          cards[1] = tmp_cards[5];
77
          cards[2] = tmp_cards[8];
78
          cards[3] = tmp_cards[11];
79
          cards[4] = tmp_cards[14];
80
          cards[5] = tmp_cards[17];
81
          cards[6] = tmp_cards[20];
82
          cards[7] = tmp_cards[23];
83
          cards[8] = tmp_cards[26];
84
          cards[9] = tmp_cards[1];
85
          cards[10] = tmp_cards[4];
86
          cards[11] = tmp_cards[7];
87
          cards[12] = tmp_cards[10];
88
          cards[13] = tmp_cards[13];
89
          cards[14] = tmp_cards[16];
90
          cards[15] = tmp_cards[19];
91
          cards[16] = tmp_cards[22];
92
          cards[17] = tmp_cards[25];
93
          cards[18] = tmp_cards[0];
94
          cards[19] = tmp_cards[3];
95
          cards[20] = tmp_cards[6];
96
          cards[21] = tmp_cards[9];
97
          cards[22] = tmp_cards[12];
98
          cards[23] = tmp_cards[15];
99
          cards[24] = tmp_cards[18];
100
          cards[25] = tmp_cards[21];
101
          cards[26] = tmp_cards[24];
102
          break;
103
        }
104
      break;
105
    case 1:
106
      switch(belongs) {
107
        case "top":
108
          cards[0] = tmp_cards[1];
109
          cards[1] = tmp_cards[4];
110
          cards[2] = tmp_cards[7];
111
          cards[3] = tmp_cards[10];
112
          cards[4] = tmp_cards[13];
113
          cards[5] = tmp_cards[16];
114
          cards[6] = tmp_cards[19];
115
          cards[7] = tmp_cards[22];
116
          cards[8] = tmp_cards[25];
117
          cards[9] = tmp_cards[0];
118
          cards[10] = tmp_cards[3];
119
          cards[11] = tmp_cards[6];
120
          cards[12] = tmp_cards[9];
121
          cards[13] = tmp_cards[12];
122
          cards[14] = tmp_cards[15];
123
          cards[15] = tmp_cards[18];
124
          cards[16] = tmp_cards[21];
125
          cards[17] = tmp_cards[24];
126
          cards[18] = tmp_cards[2];
127
          cards[19] = tmp_cards[5];
128
          cards[20] = tmp_cards[8];
129
          cards[21] = tmp_cards[11];
130
          cards[22] = tmp_cards[14];
131
          cards[23] = tmp_cards[17];
132
          cards[24] = tmp_cards[20];
133
          cards[25] = tmp_cards[23];
134
          cards[26] = tmp_cards[26];
135
          break;
136
        case "middle":
137
          cards[0] = tmp_cards[0];
138
          cards[1] = tmp_cards[3];
139
          cards[2] = tmp_cards[6];
140
          cards[3] = tmp_cards[9];
141
          cards[4] = tmp_cards[12];
142
          cards[5] = tmp_cards[15];
143
          cards[6] = tmp_cards[18];
144
          cards[7] = tmp_cards[21];
145
          cards[8] = tmp_cards[24];
146
          cards[9] = tmp_cards[1];
147
          cards[10] = tmp_cards[4];
148
          cards[11] = tmp_cards[7];
149
          cards[12] = tmp_cards[10];
150
          cards[13] = tmp_cards[13];
151
          cards[14] = tmp_cards[16];
152
          cards[15] = tmp_cards[19];
153
          cards[16] = tmp_cards[22];
154
          cards[17] = tmp_cards[25];
155
          cards[18] = tmp_cards[2];
156
          cards[19] = tmp_cards[5];
157
          cards[20] = tmp_cards[8];
158
          cards[21] = tmp_cards[11];
159
          cards[22] = tmp_cards[14];
160
          cards[23] = tmp_cards[17];
161
          cards[24] = tmp_cards[20];
162
          cards[25] = tmp_cards[23];
163
          cards[26] = tmp_cards[26];
164
          break;
165
        case "bottom":
166
          cards[0] = tmp_cards[2];
167
          cards[1] = tmp_cards[5];
168
          cards[2] = tmp_cards[8];
169
          cards[3] = tmp_cards[11];
170
          cards[4] = tmp_cards[14];
171
          cards[5] = tmp_cards[17];
172
          cards[6] = tmp_cards[20];
173
          cards[7] = tmp_cards[23];
174
          cards[8] = tmp_cards[26];
175
          cards[9] = tmp_cards[0];
176
          cards[10] = tmp_cards[3];
177
          cards[11] = tmp_cards[6];
178
          cards[12] = tmp_cards[9];
179
          cards[13] = tmp_cards[12];
180
          cards[14] = tmp_cards[15];
181
          cards[15] = tmp_cards[18];
182
          cards[16] = tmp_cards[21];
183
          cards[17] = tmp_cards[24];
184
          cards[18] = tmp_cards[1];
185
          cards[19] = tmp_cards[4];
186
          cards[20] = tmp_cards[7];
187
          cards[21] = tmp_cards[10];
188
          cards[22] = tmp_cards[13];
189
          cards[23] = tmp_cards[16];
190
          cards[24] = tmp_cards[19];
191
          cards[25] = tmp_cards[22];
192
          cards[26] = tmp_cards[25];
193
          break;
194
        }
195
      break;
196
    case 2:
197
      switch(belongs) {
198
        case "top":
199
          cards[0] = tmp_cards[2];
200
          cards[1] = tmp_cards[5];
201
          cards[2] = tmp_cards[8];
202
          cards[3] = tmp_cards[11];
203
          cards[4] = tmp_cards[14];
204
          cards[5] = tmp_cards[17];
205
          cards[6] = tmp_cards[20];
206
          cards[7] = tmp_cards[23];
207
          cards[8] = tmp_cards[26];
208
          cards[9] = tmp_cards[1];
209
          cards[10] = tmp_cards[4];
210
          cards[11] = tmp_cards[7];
211
          cards[12] = tmp_cards[10];
212
          cards[13] = tmp_cards[13];
213
          cards[14] = tmp_cards[16];
214
          cards[15] = tmp_cards[19];
215
          cards[16] = tmp_cards[22];
216
          cards[17] = tmp_cards[25];
217
          cards[18] = tmp_cards[0];
218
          cards[19] = tmp_cards[3];
219
          cards[20] = tmp_cards[6];
220
          cards[21] = tmp_cards[9];
221
          cards[22] = tmp_cards[12];
222
          cards[23] = tmp_cards[15];
223
          cards[24] = tmp_cards[18];
224
          cards[25] = tmp_cards[21];
225
          cards[26] = tmp_cards[24];
226
          break;
227
        case "middle":
228
          cards[0] = tmp_cards[0];
229
          cards[1] = tmp_cards[3];
230
          cards[2] = tmp_cards[6];
231
          cards[3] = tmp_cards[9];
232
          cards[4] = tmp_cards[12];
233
          cards[5] = tmp_cards[15];
234
          cards[6] = tmp_cards[18];
235
          cards[7] = tmp_cards[21];
236
          cards[8] = tmp_cards[24];
237
          cards[9] = tmp_cards[2];
238
          cards[10] = tmp_cards[5];
239
          cards[11] = tmp_cards[8];
240
          cards[12] = tmp_cards[11];
241
          cards[13] = tmp_cards[14];
242
          cards[14] = tmp_cards[17];
243
          cards[15] = tmp_cards[20];
244
          cards[16] = tmp_cards[23];
245
          cards[17] = tmp_cards[26];
246
          cards[18] = tmp_cards[1];
247
          cards[19] = tmp_cards[4];
248
          cards[20] = tmp_cards[7];
249
          cards[21] = tmp_cards[10];
250
          cards[22] = tmp_cards[13];
251
          cards[23] = tmp_cards[16];
252
          cards[24] = tmp_cards[19];
253
          cards[25] = tmp_cards[22];
254
          cards[26] = tmp_cards[25];
255
          break;
256
        case "bottom":
257
          cards[0] = tmp_cards[0];
258
          cards[1] = tmp_cards[3];
259
          cards[2] = tmp_cards[6];
260
          cards[3] = tmp_cards[9];
261
          cards[4] = tmp_cards[12];
262
          cards[5] = tmp_cards[15];
263
          cards[6] = tmp_cards[18];
264
          cards[7] = tmp_cards[21];
265
          cards[8] = tmp_cards[24];
266
          cards[9] = tmp_cards[1];
267
          cards[10] = tmp_cards[4];
268
          cards[11] = tmp_cards[7];
269
          cards[12] = tmp_cards[10];
270
          cards[13] = tmp_cards[13];
271
          cards[14] = tmp_cards[16];
272
          cards[15] = tmp_cards[19];
273
          cards[16] = tmp_cards[22];
274
          cards[17] = tmp_cards[25];
275
          cards[18] = tmp_cards[2];
276
          cards[19] = tmp_cards[5];
277
          cards[20] = tmp_cards[8];
278
          cards[21] = tmp_cards[11];
279
          cards[22] = tmp_cards[14];
280
          cards[23] = tmp_cards[17];
281
          cards[24] = tmp_cards[20];
282
          cards[25] = tmp_cards[23];
283
          cards[26] = tmp_cards[26];
284
          break;
285
        }
286
      break;
287
    default:
288
      alert("Something went wrong. Please refresh the page.");
289
      break;
290
  }
291
 
292
  return cards;
293
}
294
 
295
$(document).ready(function() {
296
  // Step 0
297
  var fav_number = 1;
298
  var order = new Array();
299
  order[1] = "top";
300
  order[2] = "top";
301
  order[3] = "top";
302
  $('.fav_number_range').change(function() {
303
    fav_number = $(this).val();
304
    $('.fav_number').html(fav_number);
305
    switch (fav_number) {
306
      case "1":
307
        order[1] = "top";
308
        order[2] = "top";
309
        order[3] = "top";
310
        break;
311
      case "2":
312
        order[1] = "middle";
313
        order[2] = "top";
314
        order[3] = "top";
315
        break;
316
      case "3":
317
        order[1] = "bottom";
318
        order[2] = "top";
319
        order[3] = "top";
320
        break;
321
      case "4":
322
        order[1] = "top";
323
        order[2] = "middle";
324
        order[3] = "top";
325
        break;
326
      case "5":
327
        order[1] = "middle";
328
        order[2] = "middle";
329
        order[3] = "top";
330
        break;
331
      case "6":
332
        order[1] = "bottom";
333
        order[2] = "middle";
334
        order[3] = "top";
335
        break;
336
      case "7":
337
        order[1] = "top";
338
        order[2] = "bottom";
339
        order[3] = "top";
340
        break;
341
      case "8":
342
        order[1] = "middle";
343
        order[2] = "bottom";
344
        order[3] = "top";
345
        break;
346
      case "9":
347
        order[1] = "bottom";
348
        order[2] = "bottom";
349
        order[3] = "top";
350
        break;
351
      case "10":
352
        order[1] = "top";
353
        order[2] = "top";
354
        order[3] = "middle";
355
        break;
356
      case "11":
357
        order[1] = "middle";
358
        order[2] = "top";
359
        order[3] = "middle";
360
        break;
361
      case "12":
362
        order[1] = "bottom";
363
        order[2] = "top";
364
        order[3] = "middle";
365
        break;
366
      case "13":
367
        order[1] = "top";
368
        order[2] = "middle";
369
        order[3] = "middle";
370
        break;
371
      case "14":
372
        order[1] = "middle";
373
        order[2] = "middle";
374
        order[3] = "middle";
375
        break;
376
      case "15":
377
        order[1] = "bottom";
378
        order[2] = "middle";
379
        order[3] = "middle";
380
        break;
381
      case "16":
382
        order[1] = "top";
383
        order[2] = "bottom";
384
        order[3] = "middle";
385
        break;
386
      case "17":
387
        order[1] = "middle";
388
        order[2] = "bottom";
389
        order[3] = "middle";
390
        break;
391
      case "18":
392
        order[1] = "bottom";
393
        order[2] = "bottom";
394
        order[3] = "middle";
395
        break;
396
      case "19":
397
        order[1] = "top";
398
        order[2] = "top";
399
        order[3] = "bottom";
400
        break;
401
      case "20":
402
        order[1] = "middle";
403
        order[2] = "top";
404
        order[3] = "bottom";
405
        break;
406
      case "21":
407
        order[1] = "bottom";
408
        order[2] = "top";
409
        order[3] = "bottom";
410
        break;
411
      case "22":
412
        order[1] = "top";
413
        order[2] = "middle";
414
        order[3] = "bottom";
415
        break;
416
      case "23":
417
        order[1] = "middle";
418
        order[2] = "middle";
419
        order[3] = "bottom";
420
        break;
421
      case "24":
422
        order[1] = "bottom";
423
        order[2] = "middle";
424
        order[3] = "bottom";
425
        break;
426
      case "25":
427
        order[1] = "top";
428
        order[2] = "bottom";
429
        order[3] = "bottom";
430
        break;
431
      case "26":
432
        order[1] = "middle";
433
        order[2] = "bottom";
434
        order[3] = "bottom";
435
        break;
436
      case "27":
437
        order[1] = "bottom";
438
        order[2] = "bottom";
439
        order[3] = "bottom";
440
        break;
441
    }
442
  });
443
  $('.step-0 button').click(function() {
444
    $('.step-0').slideUp();
445
    $('.step-1').fadeIn();
446
    $('body').css('background-color','aquamarine');
447
  });
448
449
  // Step 1
450
  $('.step-1 .card').click(function() {
451
    $('.step-1').slideUp();
452
    $('.step-2').fadeIn();
453
    $('body').css('background-color','#333');
454
  });
455
456
  // Step 2
457
  var cards = new Array();
458
  $('.step-1 .card').each(function() {
459
    cards.push($(this).outerHTML());
460
  });
461
  Shuffle(cards);
462
  $('.step-2 .pile-1 button').after(
463
    cards[0] +
464
    cards[3] +
465
    cards[6] +
466
    cards[9] +
467
    cards[12] +
468
    cards[15] +
469
    cards[18] +
470
    cards[21] +
471
    cards[24]
472
  );
473
  $('.step-2 .pile-2 button').after(
474
    cards[1] +
475
    cards[4] +
476
    cards[7] +
477
    cards[10] +
478
    cards[13] +
479
    cards[16] +
480
    cards[19] +
481
    cards[22] +
482
    cards[25]
483
  );
484
  $('.step-2 .pile-3 button').after(
485
    cards[2] +
486
    cards[5] +
487
    cards[8] +
488
    cards[11] +
489
    cards[14] +
490
    cards[17] +
491
    cards[20] +
492
    cards[23] +
493
    cards[26]
494
  );
495
  $('.step-2 .pile button').click(function() {
496
    cards = orderCards($(this).data('pile'), cards, order[1]);
497
 
498
    $('.step-2').slideUp();
499
    $('.step-3').fadeIn();
500
    $('body').css('background-color','aquamarine');
501
  
502
    // Step 3
503
    $('.step-3 .pile-1 button').after(
504
      cards[0] +
505
      cards[3] +
506
      cards[6] +
507
      cards[9] +
508
      cards[12] +
509
      cards[15] +
510
      cards[18] +
511
      cards[21] +
512
      cards[24]
513
    );
514
    $('.step-3 .pile-2 button').after(
515
      cards[1] +
516
      cards[4] +
517
      cards[7] +
518
      cards[10] +
519
      cards[13] +
520
      cards[16] +
521
      cards[19] +
522
      cards[22] +
523
      cards[25]
524
    );
525
    $('.step-3 .pile-3 button').after(
526
      cards[2] +
527
      cards[5] +
528
      cards[8] +
529
      cards[11] +
530
      cards[14] +
531
      cards[17] +
532
      cards[20] +
533
      cards[23] +
534
      cards[26]
535
    );
536
    $('.step-3 .pile button').click(function() {
537
      cards = orderCards($(this).data('pile'), cards, order[2]);
538
 
539
      $('.step-3').slideUp();
540
      $('.step-4').fadeIn();
541
      $('body').css('background-color','#333');
542
 
543
      // Step 4
544
      $('.step-4 .pile-1 button').after(
545
        cards[0] +
546
        cards[3] +
547
        cards[6] +
548
        cards[9] +
549
        cards[12] +
550
        cards[15] +
551
        cards[18] +
552
        cards[21] +
553
        cards[24]
554
      );
555
      $('.step-4 .pile-2 button').after(
556
        cards[1] +
557
        cards[4] +
558
        cards[7] +
559
        cards[10] +
560
        cards[13] +
561
        cards[16] +
562
        cards[19] +
563
        cards[22] +
564
        cards[25]
565
      );
566
      $('.step-4 .pile-3 button').after(
567
        cards[2] +
568
        cards[5] +
569
        cards[8] +
570
        cards[11] +
571
        cards[14] +
572
        cards[17] +
573
        cards[20] +
574
        cards[23] +
575
        cards[26]
576
      );
577
      $('.step-4 .pile button').click(function() {
578
        cards = orderCards($(this).data('pile'), cards, order[3]);
579
 
580
        $('.step-4').slideUp();
581
        $('.step-5').fadeIn();
582
        $('body').css('background-color','aquamarine');
583
      
584
        //$('.your_card').html(cards[fav_number - 1]);
585
        // Reveal cards
586
        $('.your_number').html(fav_number);
587
        var count = 1;
588
        $.each(cards, function() {
589
          $('#final_cards').append("<div>"+count+"</div>"+this);
590
          count++;
591
        });
592
      });
593
    });
594
  });
595
});
 

27 Card Trick made for the internet

CSSDeck G+