jQuery+CSS3模拟WIN8卡片式UI

部分JS代码:

1. //slidedown Effect 
2. $('.slidedown').hover(function() { 
3.     $('.search').show(); 
4.     $(this).children().animate({ 
5.         top: '30' 
6.     }, 
7.     { 
8.         queue: false, 
9.         duration: 500 
10.     }); 
11. }, 
12. function() { 
13.     $(this).children().animate({ 
14.         top: '0' 
15.     }, 
16.     { 
17.         queue: false, 
18.         duration: 500 
19.     }); 
20.     $('.search').hide(); 
21. }); 
22. //slideleft Effect 
23. $('.slideleft').hover(function() { 
24.     $(this).children().animate({ 
25.         left: '-150' 
26.     }, 
27.     { 
28.         queue: false, 
29.         duration: 160 
30.     }); 
31.     $('.news').show(); 
32. }, 
33. function() { 
34.     $(this).children().animate({ 
35.         left: '0' 
36.     }, 
37.     { 
38.         queue: false, 
39.         duration: 160 
40.     }); 
41.     $('.news').hide(); 
42. }); 
43. //slideright Effect 
44. $('.slideright').hover(function() { 
45.     $(this).children().animate({ 
46.         left: '140' 
47.     }, 
48.     { 
49.         queue: false, 
50.         duration: 160 
51.     }); 
52.     $('.news2').show(); 
53. }, 
54. function() { 
55.     $(this).children().animate({ 
56.         left: '0' 
57.     }, 
58.     { 
59.         queue: false, 
60.         duration: 160 
61.     }); 
62.     $('.news2').hide(); 
63. }); 
64.  
65. //startMenu Effect 
66. $('#start').toggle(function() { 
67.     $(this).addClass('click'); 
68.     $('#startMenu').slideDown(110); 
69.     $('.container').addClass('small'); 
70. }, 
71. function() { 
72.     $(this).removeClass('click'); 
73.     $('#startMenu').slideUp(110); 
74.     $('.container').removeClass('small'); 
75. });