jQueryのアコーディオンアニメーション品プレゼンテーション

1  <！DOCTYPE HTML > 
2  < HTML のlang = "EN" > 
3  < ヘッド> 
4      < メタのcharset = "UTF-8" > 
5      < タイトル>タイトル</ タイトル> 
6  </ ヘッド> 
7  
8  < スタイル> 
9      * { 
10          マージン：0 ; 
11          パディング：0 。
12      } 
13     DIV { 
14          マージン：100pxに自動; 
15          幅：1200px ; 
16          高さ：400ピクセル; 
17          オーバーフロー：隠されました; 
18      } 
19      UL { 
20          リストスタイル：なし。
21  
22      } 
23      のLi { 
24          フロート：左; 
25          幅：240ピクセル; 
26         高さ：400ピクセル; 
27      } 
28  
29  </ スタイル> 
30  < ボディ> 
31  
32  < スクリプトSRC = "https://code.jquery.com/jquery-1.10.1.min.js" > </ スクリプト> 
33  
34  
35  < スクリプト> 
36      $（関数（）{
 37          VAR $ LIS = $（" UL>李" ）;
 38          用（VAR I = 0 ;私< $ lis.length。++ I）{
 39              $ lis.eq（I）の.css（" backgroundImageの" 、" URL（ 'IMGS / " + （I + 1 ）+ " .JPG'）" ）;
40          }
 41  
42  
43          $のlis.mouseenter（関数（）{
 44              $（この）.stop（）（{アニメーション。" 幅" ：800 }。）兄弟（）（停止）アニメーション（{。。" 幅" ：100 }）。
45          。}）mouseleave（関数（）{
 46              $（この）.stop（）（{アニメーション。" 幅" ：240 }）兄弟（））（停止アニメーション（{。。。" 幅" ：240 }）;
 47          }）;
48  
49  
50      }）;
51  </ スクリプト> 
52  
53  
54  < DIV クラス= "ボックス" > 
55      < UL > 
56          < リチウム> </ 李> 
57         < リチウム> </ 李> 
58          < リチウム> </ 李> 
59          < リチウム> </ 李> 
60          < リチウム> </ 李> 
61      </ UL > 
62  </ DIV > 
63  
64  </ ボディ> 
65  </ HTML >