東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

jQueryで覚えたこと2【アニメーションなど】

はいjquery覚えたこと第2弾~。とりあえず今は文法を覚えるべきだお。

表示されている要素を非表示(hideメソッド

<script>
$(function(){
  $("#aaa").hide();
  $("#bbb").hide('fast');
  $("#ccc").hdie(5000);
});
</script>


日表示されている要素を表示する(showメソッド

<script>
$(function(){
  $("#aaa").show();
  $("#bbb").show('slow');
  $("#ccc").show(5000);
});
</script>

showメソッドセレクタcssでdisplay:noneで隠しとかなければいけない


showメソッドとhideメソッド応用

<script>
$(function(){
  $("#show_btn").on("click", function(){
    $("#aaa").show();
    $("#bbb").show('slow');
    $("#ccc").show(5000);  
  });

  $("#hide_btn").on("click", function(){
    $("#aaa").hide(); 
    $("#bbb").hide('slow');
    $("#ccc").hide(5000);
  });
});
</script>

セレクタを表示させる、非表示させるボタンを作ってそれぞれを押すと動作


表示されている要素をフェードアウトする(fadeOutメソッド)

<script>
$(function(){
  $("#aaa").fadeOut();
  $("#bbb").fadeOut('slow');
  $("#ccc").fadeOut(5000);
});
</script>


非表示されている要素をフェードインする(fadeInメソッド)

<script>
$(function(){
  $("#aaa").fadeIn();
  $("#bbb").fadeIn('slow');
  $("#ccc").fadeIn();
});
</script>

こちらもセレクタcssでdisplay:noneにして非表示にしておく必要あり

非表示にしているHTML要素をスライドダウンで表示(slideDownメソッド)

<script>
$(function(){
  $("#aaa").slideDown();
  $("#bbb").slideDown('slow');
  $("#ccc").slideDown(5000);
});
</script>

セレクタcssでdisplay:noneにして非表示にしておく必要あり

表示しているHTML要素をスライドアップで非表示(slideUpメソッド)

<script>
$(function(){
  $("#aaa").slideUp();
  $("#bbb").slideUp('slow');
  $("#ccc").slideUp(5000);
});
</script>

HTML要素の表示・非表示を切り替える(slideToggleメソッド

<script>
$(function(){
  $("#btn").on("click", function(){
    $("#aaa").slideToggle();
    $("#bbb").slideToggle('slow');
    $("#ccc").slideToggle(5000);
  });
});
</script>

ボタンを押すと三つのボックスがslideup,downをする。

クリックイベントを関数から直接実行する(triggerメソッド)

<script>
$(function(){
  $("#show_btn").on("click", function(){
    $("#aaa").show();
    $("#bbb").show('slow');
    $("#ccc").show(5000);
  });
  $("#hide_btn").on("click", function(){
    $("#aaa").hide();
    $("#bbb").hide('slow');
    $("#ccc").hide(5000);
  });

  $("#show_btn").trigger("click");
});
</script>

animateメソッド基本の書き方

<script>
$(function(){
  $("#aaa").animate{(
    "marginLeft":"600px"
  });
});
</script>


animateメソッド複数プロパティを同時に指定)

<script>
$(fucntiion(){
  $("#aaa").animate({
  "marginLeft":"600px",
  "color":"red",
  "height:"30px"
  });
});
</script>


animateメソッド(アニメーション時間指定)

<script>
$(function(){
  $("#aaa").animate({
    "color": "red",
    "width":"30px"
  },
  {
  duration:6000
   }
  );
});
</script>

animateメソッド(イージング)

<script>
$(function(){
  $("#aaa").animate{(
  "width":"30px",
  "height":30px",
  },
  {
  duration:5000,
  easing:"swing"
  }
  );
});
</script>

イージングライブラリダウンロードサイト
http://gsgd.co.uk/sandbox/jquery/easing/


animateメソッド(completeプロパティ)

<script>
$(function(){
  $("#aaa").animate({
  "marginLeft":"600px",
  "color":"red"
  },
  {
  duration:5000,
  easing:"swing",
  complete:function(){
  $(this).text('完了');
  }
  }
);

});
</script>

animateメソッド(stopメソッド)

<script>
$(function(){
  $("#aaa").animate({
  "marginLeft":"600px",
  "width":"30px"
  },
  {
  duration:5000,
  easing:"swing",
  }
);  

  $("#stop_end").on("click", function(){
    $("#aaa").stop();
  });

});
</script>

まだまだおぼえなならぬ。。。