jQueryはアコーディオンの小さなケースを実装します

<ヘッド>
    <メタ文字セット="UTF-8">
    <title>アコーディオン</title>
    <link rel="スタイルシート" href="../animate.css">
    <link rel="スタイルシート" href="css/index.css">
    <script src="../jquery-3.1.0.js"></script>
    <!-- <script src="js/accordionindex.js"></script>-->

</head>
<本文>
    <div class="bg"></div>
    <div class="bg"></div>
    <div class="bg"></div>
    <div class="bg bg-active"></div>
    <div class="main">
        <ul>
            <li><div><p>クロスファイア</p></div></li>
            <li><div><p>王の栄光</p></div></li>
            <li><div><p>コール オブ デューティ</p></div></li>
            <li class="li-active"><div><p>リーグ・オブ・レジェンド</p></div></li>
        </ul>
    </div>
</本文>

<スクリプト>
    $(関数() {
       $("li").mouseenter(関数() {
           //stop() はアニメーション効果を停止します$(this).stop().animate({width:"700px"},1000,"linear").fadeIn();
           $(this).siblings("li").stop().animate({width:"100px"},1000,"linear").fadeIn();
           $(".bg").eq($(this).index()).siblings(".bg").stop().fadeOut();
           $(".bg").eq($(this).index()).stop().animate({top:"700px"},400,"linear").fadeIn();

       }); 
    });
</スクリプト>

*{
    マージン: 0;
    パディング: 0;
}
html,本文,.bg{
    高さ: 700ピクセル;
    幅: 1400ピクセル;
    オーバーフロー: 非表示;
}
体{
    位置: 相対的;
}
.bg{
    表示: なし;
}
.bg:n番目の子(1){
    background:url("../images/1.jpg")繰り返しなし center/cover;
}
.bg:n番目の子(2){
    background:url("../images/2.jpg")繰り返しなし center/cover;
}
.bg:n番目の子(3){
    background:url("../images/3.jpg")繰り返しなし center/cover;
}
.bg:n番目の子(4){
    background:url("../images/4.jpg")繰り返しなし center/cover;
}
/*大きな背景表示*/
.bg-アクティブ{
    表示: ブロック;
}
。主要{
    位置: 絶対;
    幅: 1000ピクセル;
    高さ: 400px;
    /*背景色: ピンク;*/
    左: 0;
    上: 0;
    右: 0;
    下部: 0;
    マージン: 自動;
}
.main ul{
    リストスタイル: なし;
}
.main ul li{
    フロート: 左;
    幅: 100ピクセル;
    高さ: 400px;
    遷移:右 1s;
}
/*小さな背景表示*/
.main ul li.li-active{
    幅: 700ピクセル;
    高さ: 400px;

}
.main ul li:nth-child(1){
     背景: url("../images/1.jpg")繰り返しなし center/cover;
 }
.main ul li:nth-child(2){
    背景: url("../images/2.jpg")繰り返しなし center/cover;
}
.main ul li:nth-child(3){
    背景: url("../images/3.jpg")no-repeat center/cover;
}
.main ul li:nth-child(4){
    背景: url("../images/4.jpg")no-repeat center/cover;
}
.main ul li div{
    高さ: 400px;
    幅: 100ピクセル;
    背景色: rgba(0,0,0,.5);
}
.main ul li div p{
    色: #fff;
    パディング: 40px;
    フォントサイズ: 20px;
    不透明度: 0.5;
}