The current article
スライダーの上に、扉が開く動作（animate）を付けるjQuery
クロスフェードのスライダー上に、扉が開く動きを付けるjQueryです。
オンマウスやクリックで開くタイプではなく、読み込めば開くタイプです。
コードはとても簡単・シンプルですので、使える部分があれば参考にしてみてください。
capture
参照サイト-スライド：最も短いコードで実装出来るイメージスライドショー
参照サイト-アニメーション：Crafting an Animated
上記の参照サイトを参考にさせていただききました。
良記事ありがとうございます！
DEMO
デモページ DEMO
デモページを例に説明していきます。
また、スライダー部分についての説明は省略ぎみです。
この記事のHTML・CSS・JSをコピペすれば動くと思いますが、詳しくは参照サイトの「スライド」をご覧ください。
記述例：HTML
<html>
<head>
・
・
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="js/animate.js" type="text/javascript"></script>
・
・
</head>
<body>
・
・
<div class="slidewrap">
<div class="cover"><img src="img/cover.png" alt=""></div>
<div class="left-pos"><img src="img/slide_left.png"></div>
<div class="right-pos"><img src="img/slide_right.png"></div>
<div class="slide">
<div class="in">
<img src="img/slide01.jpg">
<img src="img/slide02.jpg">
<img src="img/slide03.jpg">
</div>
</div>
</div>
・
・
</body>
</html>
5行目で、CSS（後述）
6行目で、jQuery本体
7行目で、実行JSを読み込み（後述）
16行目、丸抜きの画像部分なので、不必要なら削除OK
17行目、左扉画像
18行目、右扉画像
19行目以降スライダー部分
21～23行目、スライダー画像
CSS(style.css)
.slidewrap{ position:relative; margin:0 auto 30px; width:960px; height:450px; overflow:hidden; }
.cover { position:absolute; top:0; left: 0; z-index:100;}
.left-pos{ position:absolute; top:0; left: 260px; z-index:50; }
.right-pos{ position:absolute; top:0; left: 480px; z-index:50; }
.slide { position:absolute; top:0; left:0;}
.slide .in { position:relative; width:960px; }
.slide .in img { position:absolute; left:0; top:0; }
1行目、「.slidewrap」の「position:relative」と「overflow:hidden」は必ず指定
後で述べる「JS」の基準も、このボックスの左上
2行目、カバー画像を付ける場合に記述、「z-index:100;」で重なりを上層に
3行目、左扉の開始位置と重なりを指定
4行目、右扉の開始位置と重なりを指定
両扉は「z-index:50;」で、スライダーとカバー画像の間に配置
5行目以降スライダー部分
JS(animate.js)
$(window).load(function() {
setTimeout(function() {
$(".left-pos").animate({left: '-220px' }, {queue:false,duration:2000});
$(".right-pos").animate({left: '960px' }, {queue:false,duration:2000});
},1000); //扉部分
$('.in img:gt(0)').hide();
setInterval(function() {
$('.in :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('.in');
}, 4000); //スライダー部分
});
1行目は、全て読み込んでから動作開始
2行目（と5行目）で、読み込んで1秒後に動作開始と指示
3行目、「left-pos」というクラスの付いたボックスを、基準から「left: ‘-220px’」の場所まで「duration:2000」2秒かけて移動
4行目、「right-pos」というクラスの付いたボックスを、基準から「left: ‘960px’」の場所まで「duration:2000」2秒かけて移動
「queue:false」とあるのは、同時にアニメーションさせるため
7行目、最初の画像以外を非表示
8行目（と10行目）、1回のフェードイン・アウトのインターバル（10行目に秒数を入れる）
9行目、フェードインとアウトを繰り返し、
「fadeOut」と「fadeIn」のカッコ内はフェードを何秒かけるか
となります。
DEMOページには別バージョンも置いてみました。
気になる所があれば、ソースをご覧いただければと思います。
少し変更すれば、1枚扉やシャッターのような上下の動きにも出来ますし、
スライダー部分は他のスライダーに差し替えても大丈夫と思います・・・
参考になれば良いのですが、適宜ご自分でカスタマイズしてください！
（動いてますが、コード間違っていたらすみません）
以上、「スライダーの上に、扉が開く動作（animate）を付けるjQuery」でした。
関連記事
