質問編集履歴

1 javascript code部修正

seint.k

seint.k score 12

2016/09/29 11:26  投稿

[Jquery] animate関数の使い方がわからない
[条件]ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
①、②、③、④、⑤のカードを重ねて配置する(初期状態では昇順に数字が並ぶ、一番上が①一番下は⑤)。
その下に「進むボタン」と「戻るボタン」を配置。
![初期配置はこんな感じです](1835f20e65e0779a4a92b93b3409c5f9.png)
進むボタンを押すとカードが右にスライドし、下のカードが現れる。
(例えば、表示カードが①の状態で進むボタンを押すと②カードが表示される)
表示カードが⑤の状態で進むボタンを押すと①カードが表示される。
反対に、戻るボタンを押すと進むボタンと反対の動きをする。
表示カードが②の状態で、戻るボタンを押すと①カードが、画面の右から左スライドしながら②カードの上に表示される。
表示カードが①の状態で戻るボタンを押すと⑤カードが表示される。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
上記のようなプログラムを作成しようとしています。
スライドにはanimate関数を使用します。
初期配置迄は完了しているのですが、表示切り替えがうまく実装出来ません(animate関数の中身)
配列を使って、表示カードの情報を次々更新していけば良いのかと思いましたが、
記述方法がわかりませんでした。
このプログラムを作成後、改変し様々な動きを付けながら勉強しようと思っています。
その前段階でつまっており、考え方・記述方法をご教授頂けないでしょうか。
```HTML
<!DOCTYPE HTML>
<html>
   <head>
       <meta charset="UTF-8">
       <title>page</title>
       <link rel="stylesheet" type="text/css" href="style.css" />
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
       <script type="text/javascript" src="page.js"></script>
   </head>
   <body>   
       <div class="container">
             <img src="number1.png" alt="number1" id="stage1" class="stage">
             <img src="number2.png" alt="number2" id="stage2" class="stage">
             <img src="number3.png" alt="number3" id="stage3" class="stage">
             <img src="number4.png" alt="number4" id="stage4" class="stage">
             <img src="number5.png" alt="number5" id="stage5" class="stage">
       </div>
       <div class="button">
            <input type="button" value="進む" id="button1">
             <input type="button" value="戻る" id="button2">
       </div>
   </body>
</html>
```
```CSS
@charset "UTF-8";
body{
}
/* #container
--------------------------- */
.container{
   /*
   top: 0;
   left: 0;
   width: 100%;
   position: absolute;
   z-index: 1;
   */
   position:relative;
   width:100%;
   height:100%;
}
#stage1{
   position:absolute;
   top:0px;
   left:600px;
   width:300px;
   height:300px;
   z-index:5;
}
#stage2{
   position:absolute;
   top:0px;
   left:600px;
   width:300px;
   height:300px;
   z-index:4;
}
#stage3{
   position:absolute;
   top:0px;
   left:600px;
   width:300px;
   height:300px;
   z-index:3;
}
#stage4{
   position:absolute;
   top:0px;
   left:600px;
   width:300px;
   height:300px;
   z-index:2;
}
#stage5{
   position:absolute;
   top:0px;
   left:600px;
   width:300px;
   height:300px;
   z-index:1;
}
.button{
   position:absolute;
   top:400px;
}
#button1{
   width:70px;
   height:30px;
   margin-right:100px;
   margin-left:620px;
   cursor:pointer;
}
#button2{
   width:70px;
   height:30px;
   cursor:pointer;
}
```
```javascript
$(function(){
   $("#button1").click(function(){
         $(".container > #stage1").animate(![イメージ説明](182e390403af3364ee241922d3b3fa3d.png)"1200px"},
         $(".container > #stage1").animate({left:"1200px"},
           600,
           "swing"
       );
   });
});
```
  • JavaScript

    27809 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    16959 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    11650 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る