Idea to Code

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

hawk

JavaScript

JavaScriptでコンテンツ切り替えその３2015/11/18

JavaScriptでコンテンツ切り替えその２を改良してみた。


表示切替の基本の仕組みは同じ。

HTML、CSSに変更点はなし。

■表示の切り替えをアニメーション化

　animateを使ってアニメーションを実装。

■ボタンの連打を抑制

　変数changingで状態を管理することで連打を抑制。

■with文を使ってスクリプトを少し簡略化

　$("#cont > div")を省略している。

※要jQuery


【動作確認】

1つ目のコンテンツ

p1p1p1p1p1p1p1

2つ目のコンテンツ

p2p2p2p2p2p2p2p2

3つ目のコンテンツ

p3p3p3p3p3p3p3p3


HTML.txt HTML.txt 
<div id="cont">
  <div>
    <p>1つ目のコンテンツ</p>
    <p>p1p1p1p1p1p1p1</p>
  </div>
  <div>
    <p>2つ目のコンテンツ</p>
    <p>p2p2p2p2p2p2p2p2</p>
  </div>
  <div>
    <p>3つ目のコンテンツ</p>
    <p>p3p3p3p3p3p3p3p3</p>
  </div>
</div>
<br>
<input type="button" value="切り替え" id="changeButton" />
hide.css hide.css 
.hide {
  display : none;
}
change.js 
$(function(){
  $("#changeButton").click(
    (function(){
      var nextCont = 0;
      var changing = false;
      
      with($("#cont > div")){
        addClass("hide");
        eq(nextCont).removeClass("hide");
        
        return function(){
          if(!changing){
            changing = true;
            
            eq(nextCont).animate(
              {  opacity : 'hide'},
              {  duration : 1000,
                easing : 'swing',
                complete : function(){
                  nextCont++;
                  if(nextCont >= length)
                    nextCont = 0;
                  eq(nextCont).animate(
                    {  opacity : 'show'},
                    {  duration : 1000,
                      easing : 'swing',
                      complete : function(){
                        changing = false;
                      }
                    }
                  );
                }
              }
            );
          }
        }
      }
    })()
  );
});