jQuery 日時選択ボックスdatetimepicker(xdsoft)

設定

https://xdsoft.net/jqplugins/datetimepicker/
からライブラリをダウンロード
jquery.datetimepicker.full
jquery.datetimepicker
を参照
jquery.min.js
jquery-ui.min.js
も参照

実装

オプション

※HTML
<input type="text" id="datetime" readonly="readonly">

※JavaScript
<script>
$(function() {

  $.datetimepicker.setLocale('ja');
  $('#datetime').datetimepicker({
  
   
    時間選択ボックス非表示
    timepicker : false,
    
    日付フォーマット
    format:'Y/m/d',
    
    日付選択ボックス非表示
    datepicker:false,
    
    時間フォーマット
    format:'H:i',
    
    時間選択ボックスに表示する時間
    allowTimes:["9:00", "10:00", "11:00", "12:00"],
    
  });

});
</script>

Ajax利用

日付選択ボックスと時間選択ボックスを個別に表示。

日付選択ボックス
文字入力不可
選択可能な日はハイライト表示

時間選択ボックス
文字入力不可
選択可能な日を選択するまでは時間選択不可
選択可能な日の内、選択可能な時間をプログラムで取得する
サーバ側の処理は省略

※HTML
<input type="text" id="date" readonly="readonly"">
<input type="text" id="time" readonly="readonly" disabled="disabled">

※JavaScript
<script>
日付
var eventDates = ["2019/6/5","2019/6/10","2019/6/15","2019/6/20","2019/6/25","2019/6/30"];

PHP等を利用する場合、↑のフォーマット(0埋め無しで日付配列を取得する必要あり)
var eventDates = <?= $eventDates; ?>;

$(function() {
  $.datetimepicker.setLocale('ja');
  $('#date').datetimepicker({
    format:'Y/m/d',
    timepicker : false,
    変数eventDates配列の日付だった場合に背景色を変更
    beforeShowDay:function(date){
      var d = date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
      for(var i=0; i<eventDates.length; i++){
        if(eventDates[i] == d ){
          背景色
          return ["xdsoft_highlighted_mint"];
        }else{
          continue;
        }
      }
    },
    日付選択時イベント
    onChangeDateTime: function(){
      var eventTimes = [];
      var select = $('#date').val().replace(/\/0/g, "/");

      if ( eventDates.find(item => item === select) ){

        var date = $('#date').val();

        var result = $.ajax(
          {
            type: "GET",
            contentType: 'application/json',
            url: サーバーURL,
            data:{
              "date":$('#date').val()
            },
            async: false,
            success: function(data)
            {
              var json = $.parseJSON(data);
              var len = json.length;

              for(var i = 0; i < len; i++) {
                eventTimes.push(json[i].time);
              }

              $("#time").prop('disabled', false);

              $('#time').datetimepicker({
                format:'H:i',
                datepicker:false,
                
                Ajaxで取得した時間の配列を設定。↓の様な配列の必要あり
                allowTimes:eventTimes,
                allowTimes: ["9:00", "10:00", "11:00", "12:00"],
              });
            },
            error: function(XMLHttpRequest,textStatus,errorThrown)
            {
              Ajax通信失敗処理
            }
          }
        );

      }else{
        $("#time").prop('disabled', true);
      }
    }
  });
});
</script>

jQuery スライダー fotorama

読み込み

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js"></script>
<script type="text/javascript" src="./js/fotorama.js"></script>
<link rel="stylesheet" href="./css/fotorama.css" />

設定

<div class="fotorama"
  オプション1=~
  オプション2=~
  オプション3=~>
  <img src="./images/1.jpg">
  <img src="./images/2.jpg">
</div>

画像でない要素もスライド可能
<div class="fotorama">
  <div>~</div>
  <div>~</div>
  <div>~</div>
</div>

オプション

<div class="fotorama"
  幅
  data-width="800&quot
  
  高さ
  data-height="600">
  
  サムネイル表示
  data-nav="thumbs"
  
  全画面表示
  data-allowfullscreen="true"
  
  フェード表示
  data-transition="crossfade"
  
  ループ再生
  data-loop="true"
  
  自動再生
  data-autoplay="true"
  
  矢印表示
  data-arrows="true"
  
  クリック移動
  data-click="true"
  
  スワイプ移動
  data-swipe="true"
  
 <img src="./images/1.jpg">
 <img src="./images/2.jpg">
</div>


幅を自動調整
<div class="fotorama" >
 <img src="./images/1.jpg">
 <img src="./images/2.jpg" data-fit="cover">
</div>


画像にキャプションを表示
<div class="fotorama">
 <img src="./images/1.jpg" data-caption="One">
 <img src="./images/2.jpg" data-caption="Two">
</div>

jQuery スライダー bxSlider

jQuery

<div class="wrapper-slide">
 <div class="slide">
  <ul class="container">
   <li class="current"><img src="(画像1)" width=~ height=~ /></li>
   <li><img src="(画像2)" width=~ height=~ /></li>
   <li><img src="(画像3)" width=~ height=~ /></li>
  </ul>
  <a href="#" class="prev">前の画像</a>
  <a href="#" class="next">次の画像</a>
 </div>
</div>

<style>
/* スライドショー全体のスタイル */
.slide {
 position: relative;
 margin: 0 auto;
 max-width: 198px;
 font-size: 0; /* 画像下の隙間を埋めるため */
}
.slide img {
 max-width: 100%;
}
.slide > .container {
 position: relative;
 overflow: hidden;
 margin: 0;
 padding: 0;
 list-style: none;
}
/* 写真の配置 */
.slide > .container > li {
 position: absolute;
 z-index: 0;
 top: 0;
 left: 0;
 opacity: 0;
 transition: opacity 1s linear;
}
.slide > .container > li.current {
 position: relative;
 z-index: 1;
 opacity: 1;
}
/* スライドショーのボタン */
.slide a.prev,
.slide a.next {
 position: absolute;
 display: block;
 top: 45%;
 width: 40px;
 height: 40px;
 text-indent: -5000px;
 z-index: 10; /* ボタンを常に画像より上に配置 */
}
.slide a.prev {
 background: url(矢印画像左1) 50% 50% no-repeat;
 left: 0;
}
.slide a.prev:hover {
 background: url(矢印画像左2) 50% 50% no-repeat;
}
.slide a.prev:active {
 background: url(矢印画像左3) 50% 50% no-repeat;
}
.slide a.next {
 background: url(矢印画像右1) 50% 50% no-repeat;
 right: 0;
}
.slide a.next:hover {
 background: url(矢印画像右2) 50% 50% no-repeat;
}
.slide a.next:active {
 background: url(矢印画像右3) 50% 50% no-repeat;
}
/**
* RESPONSIVE: スマートフォン向けウィンドウ幅600px以下
*/
@media screen and (max-width:600px) {
 .slide a.prev,
 .slide a.next {
  top: 40%;
 }
}
</style>
<script>
$(function(){
 var intervalId;
 setTimer();
 
 function setTimer(){
  intervalId = setInterval(autoClick, 10000);
 }
 function autoClick(){
   $(‘.slide’).children(‘a.next’).click();
 }
 
 function changeImage($click){
  //console.log($click);
  var $current;
  var findSelector = ”;
  var $new;
  
  $current = $click.siblings(‘.container’).children(‘.current’);
  
  if($click.hasClass(‘next’)){
   $new = $current.next();
   findSelector = ‘:first-child’;
  } else {
   $new = $current.prev();
   findSelector = ‘:last-child’;
  }
  
  if($new.length == 0) {
   $new = $current.siblings(findSelector);
  }
  $current.removeClass(‘current’);
  $new.addClass(‘current’);
  setTimer();
 }
 
 $(‘.slide’)
 .on(‘click’, ‘> a’, function(event){
  event.preventDefault();
  clearInterval(intervalId);
  changeImage($(this));
 });
});
</script>

jQueryプラグイン

プラグイン:bxSlider設定

http://bxslider.com/
からダウンロード、解凍してフォルダごと参照設定

jquery.bxslider
└jquery.bxslider.js
└jquery.bxslider.css
└images
└plugins
test.html

※test.html
<script src="http://code.jquery.com/jquery-1.10.1.min.js"
integrity="sha256-SDf34fFWX/ZnUozXXEH0AeB+Ip3hvRsjLwp6QNTEb3k="
 crossorigin="anonymous"></script>

※jQueryのバージョンによっては動かないらしい
<script src="./jquery.bxslider/jquery.bxslider.js"></script>
<link rel="stylesheet" href="./jquery.bxslider/jquery.bxslider.css">

標準


<ul class="bxslider">
 <li><img src="画像1" width=~ height=~ /></li>
 <li><img src="画像2" width=~ height=~ /></li>
 <li><img src="画像3" width=~ height=~ /></li>
</ul>
<script>
$(document).ready(function(){
 $('.bxslider').bxSlider();
});
</script>

オプション

<script type="text/javascript">
$(document).ready(function(){
 $('.bxslider').bxSlider({
  auto: true, 自動再生
  speed: 1000, スライド速度
  pause: 4000, スライド間の停止時間
  mode: 'horizontal', 横スライド
  mode: 'vertical', 縦スライド
  mode: 'fade', フェードイン
  pager: 'false', ●〇ボタン
  controls: 'false' ←→ボタン
 });
});
</script>

Bootstrap

Bootstrap カルーセル(スライドショー)」参照

jQuery イベント

※詳細はhtmlイベント一覧参照

イベントをキャッチ

<input type="button" id="btnTest" value="aaa" />

$(function(){
  $('#btnTest').on('click' , function(){
    ~
  });
});
以下の様な書き方も可
$(function(){
  $('#btnTest').click(function(){
    ~
  });
});

$(function(){
  $('#btnTest').on('click' , (セレクタ) , function(){
  $('#btnTest').on('click' , 'input:not(.allow_submit)' , function(){
    ~
  });
});
“input:not(.allow_submit)”

サブルーチン呼び出し
function subRoutine(){
  window.alert('OK');
}
$(function(){
  $('#btnTest').click(function(){
    subRoutine();
  });
  または
  $('#btnTest').click(subRoutine);
  $('#btnTest').on('click',subRoutine);

});

イベントを発生させる

<input type="button" id="btnTest" value="aaa" />
先にイベントを書いておく

$(function(){
  $('#btnTest').trigger('click');
});

イベントのキャンセル

$(document).on("keypress", function (event) {

  イベント(この場合、全キー押下)をキャンセル
  event.preventDefault();
  

  Enterキー押下をキャンセル
  return event.which !== 13;
 }
});

特定の操作をキャンセル
$(document).on("keypress", function (event) {
 Enterキー押下時
 if (event.keyCode == 13) {
  イベント(この場合Enterキー押下)をキャンセル
  event.preventDefault();
 }
});

イベントの種類

click / dblclick
mouseout / mouseover / mousedown / mouseup / hover
mousemove
keypress / keydown / keyup
change
select
submit
focus/ blur
contextmenu
※詳細はhtmlイベント一覧参照

jQuery Post

$.post(
  "test.php",
  { "prm1":"100", "prm2":"aaa" },
  function(dt){
    成功時
  }
)
.done( function(data) {
  成功時
})
.fail( function() {
  失敗時
})
.always ( function() {
  常時
});

jQuery Validation

jQueryライブラリ
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
jQueryValidationライブラリ
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>

ユーザー名:
  
  
パスワード:
  
  

<form id="fm">
 ユーザー名:<label>
  <input type="text" id="username" name="username" size="20" />
 </label>
 パスワード:<label>
  <input type="text" id="password" name="password" size="20" />
 </label>
 <input type="submit" value="登録" />
</form>
<style>
 label {color: red;}
</style>

<script type="text/javascript">
  $(function(){
    $("#fm").validate({
      rules: {
        "username":{
          required: true,
          email: true
        },
        "password":{
          required: true,
          minlength: 6
        }
      },
      messages:{
        "username":{
          required: " ※ユーザー名は必須です。",
          email: " ※ユーザー名にはメールアドレスを入力して下さい。"
        },
        "password":{
          required: " ※パスワードは必須です。",
          minlength: $.validator.format(" ※パスワードは{0}文字以上を入力して下さい。")
        }
      }
    });
  });
</script>

jQuery Ajax

概要

Asynchronous JavaScript + XML
非同期通信
JavaScriptを使用し、ページ全体の再ロードを行わずにXMLデータだけをやり取りする技術

$.get(url, params, callback, type);
$.post(url, params, callback, type)
$ajax(url, options);

load()

$(~).load(url, data, complete(data, textStatus, xhr));
urlで指定したリソースをAjaxで読み込み、要素に格納
$(~).load("http://test.html");

↑urlにパラメーターを渡す
$(~).load("http://test.html", "prm1=aaa&prm2=bbb");
$(~).load("http://test.html", { prm1:"aaa", prm2:"bbb"});

↑読み込み完了後コールバック関数を指定
$(~).load("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  $("#log").append("status = " + status + "<br/>");  //error等
  $("#log").append("xhr.status = " + xhr.status + "<br/>");  404等
  $("#log").append("xhr.statusText = " + xhr.statusText + "<br/>");  Not Found等
});

get()

load()と違い戻り値がない。
$.get("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
});

$.get("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
}).done(function(data, status, xhr){
  $("#log").append("Done<br/>");
}).fail(function(data, status, xhr){
  $("#log").append("failed<br/>");
});

post()

$.post("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
});

$.post("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
}).done(function(data, status, xhr){
  $("#log").append("Done<br/>");
}).fail(function(data, status, xhr){
  $("#log").append("failed<br/>");
});

getJSON()

dataがJSON形式で返ってくる
$.getJSON("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  $.each(data, function(key, val){
    $("#log").append("Data:" + key + "=" + val + "<br/>");
  });
})

汎用

非同期通信

$(document).ready(function(){
 $('#add_cart').click(function(){

  /**
  * Ajax通信メソッド
  * @param type : HTTP通信の種類
  * @param url  : リクエスト送信先のURL
  * @param data : サーバに送信する値
  */
  $.ajax(
  {
   type: "POST", GETも可
   dataType: "json", TEXT、HTML等も可
   contentType: 'application/json', 他タイプも可
   url: "http://test.com/",
   data:
   {
    "id":5,
   },
   success: function(data)
   {
    alert(data.count);
   },
   error: function(XMLHttpRequest,textStatus,errorThrown)
   {
    alert('処理できませんでした');
   },
  });
  return false;
 });
});

同期通信

$(document).ready(function(){
  function test(){
    /**
    * Ajax通信メソッド
    * @param type : HTTP通信の種類
    * @param url  : リクエスト送信先のURL
    * @param data : サーバに送信する値
    * @param async : 非同期通信
    */
    return $.ajax(
    {
     type: "POST", GETも可
     dataType: "json", TEXT、HTML等も可
     contentType: 'application/json', 他タイプも可
     url: "http://test.com/",
     data:
     {
      "id":5,
     },
     async: false
    }).responseText;
   });
  }
  
  $('#add_cart').click(function(){
  
   var result = test();
  
   if (result != 0) {
    var ret = window.confirm('カートには同商品を登録ずみです。追加しますか?');
    if (ret) {
     return true;
    }else{
     return false;
    }
   }
  });
});

サーバ側処理

jQuery 属性とCSSの操作

汎用

attr()

※html属性:attributeを取得/設定
htmlにおける属性については「html属性一覧」参照
$(要素).attr( 属性名 , 値 )
または、
$(要素).attr( 属性名 ) = 値;

$(要素).attr("disabled" , disabled)
$(要素).attr("disabled") = disabled

prop()

JavaScriptにおけるプロパティ(property)を取得/設定
$(要素).prop( プロパティ名 , 値 );
または、
$(要素).prop( プロパティ名 ) = 値;

$(要素).prop("disabled" , true)
$(要素).prop("disabled") = true

removeAttr()

$(要素).removeAttr(~)
属性~を削除

removeProp()

$(要素).removeProp(~)
属性~を削除

val()

$(要素).val(v)
要素eのvalueの取得/設定

CSS操作

css()

$(要素).css(~[,v])
CSSを取得/設定
$(要素).css("font-size" , "5em")
$(要素).css( { "font-size" : "5em" } )

addClass()

$(要素).addClass(c)
クラスcを追加

hasClass()

$(要素).hasClass(c)
クラスcが付いているか?

removeClass()

$(要素).removeClass(c)
クラスcを削除

toggleClass()

$(要素).toggleClass(c)
クラスcをトグルする

サイズ操作

height()

$(要素).height([v])
内容の高さを取得/設定

innerHeight()

$(要素).innerHeight([v])
ボーダーの内側の高さを取得/設定

innerWidth()

$(要素).innerWidth([v])
ボーダーの内側の幅を取得/設定

outerHeight()

$(要素).outerHeight()
ボーダーの外側の高さを取得

outerWidth()

$(要素).outerWidth()
ボーダーの外側の幅を取得

width()

$(要素).width([v])
内容の幅を取得/設定

位置

offset()

$(要素).offset()
eのドキュメント上での表示位置

offsetParent()

$(要素).offsetParent()
eの親要素内での表示位置

position()

$(要素).position()
eの親要素からの相対位置

scrollLeft()

$(要素).scrollLeft()
要素のスクロール位置

scrollTop()

$(要素).scrollTop()
要素のスクロール位置

データ属性操作

data()

$(要素).data()
データ属性を取得/設定

jQuery DOM操作

一覧

命令 機能
text(~) テキスト変更
text() テキスト取得
html(~) テキスト変更
html() テキスト取得
prepend(~) 要素の先頭へHTML挿入
append(~) 要素の末尾へHTML挿入
before(~) 要素の前にHTML挿入
after(~) 要素の後にHTML挿入
prependTo(~) 要素の先頭へHTML移動
appendTo(~) 要素の末尾へHTML移動
insertBefore(~) 要素の前へHTML移動
insertAfter(~) 要素の後へHTML移動
wrap(~) 要素で包む
wrapAll(~) 要素をまとめて包む
wrapInner(~) 子要素/テキストを要素で包む
unwrap() 親要素を削除
replaceWith(~) 要素を置換
remove() 要素を削除
attr(~,~) 属性値変更
attr(~) 属性値取得
removeAttr(~) 属性削除
addClass(~) class属性追加
removeClass(~) class属性削除
css(~,~) CSS属性値設定
css(~) CSS属性値取得

DOM操作命令

text(~)
変更前

<section id=”text1″>
<h5>text(~)</h5>
<p>変更前</p>
</section>

<script>
$(function(){
$(“#text1 p”).text(“変更後”);
});
</script>

結果
text()

変更前




<section id=”text2″>
<h5>text()</h5>
<p id=”texta”>変更前</p>
<p id=”textb”></p>
</section>

<script>
$(function(){
$(“#text2 p#textb”).text($(“#text2 p#texta”).text());
});
</script>

結果
html(~)
変更前

<section id=”html1″>
<h5>html(~)</h5>
<p>変更前</p>
</section>

<script>
$(function(){
$(“#html1 p”).html(“変更後”);
});
</script>

結果
html()

変更前




<section id=”html2″>
<h5>html()</h5>
<p id=”htmla”>変更前</p>
<p id=”htmlb”></p>
</section>

<script>
$(function(){
$(“#html2 p#htmlb”).text($(“#html2 p#htmla”).text());
});
</script>

結果
prepend(~)
挿 入 前

<section id=”prepend”>
<h5>prepend(~)</h5>
<p> 挿 入 前 </p>
</section>

<script>
$(function(){
$(“#prepend p”).prepend(“<b>挿入後</b>”);
});
</script>

結果

append(~)
挿 入 前

<section id=”append”>
<h5>append(~)</h5>
<p> 挿 入 前 </p>
</section>

<script>
$(function(){
$(“#append p”).append(“<b>挿入後</b>”);
});
</script>

結果

before(~)
挿 入 前

<section id=”before”>
<h5>before(~)</h5>
<p> 挿 入 前 </p>
</section>

<script>
$(function(){
$(“#before p”).before(“<b>挿入後</b>”);
});
</script>

結果

after(~)
挿 入 前

<section id=”after”>
<h5>after(~)</h5>
<p> 挿 入 前 </p>
</section>

<script>
$(function(){
$(“#after p”).after(“<b>挿入後</b>”);
});
</script>

結果

prependTo(~)
移動前

移動後

<section id=”prependTo”>
<h5>prependTo(~)</h5>
<p>移動前</p>
<b>移動後</b>
</section>

<script>
$(function(){
$(“#prependTo b”).prependTo(“#prependTo p”);
});
</script>

結果

appendTo(~)
移動前

移動後

<section id=”appendTo”>
<h5>appendTo(~)</h5>
<b>移動前</b>
<p>移動後</p>
</section>

<script>
$(function(){
$(“#appendTo b”).appendTo(“#appendTo p”);
});
</script>

結果

insertBefore(~)
移動前

移動後



<section id=”insertBefore”>
<h5>insertBefore(~)</h5>
<b>移動前</b>
<p>移動後</p>
</section>

<script>
$(function(){
$(“#insertBefore p”).insertBefore(“#insertBefore b”);
});
</script>

結果

insertAfter(~)
移動前

移動後



<section id=”insertAfter”>
<h5>insertAfter(~)</h5>
<b>移動前</b>
<p>移動後</p>
</section>

<script>
$(function(){
$(“#insertAfter b”).insertAfter(“#insertAfter p”);
});
</script>

結果

wrap(~)
wrap対象



<section id=”wrap”>
<h5>wrap(~)</h5>
<p>wrap対象</p>
</section>

<script>
$(function(){
$(“#wrap p”).wrap(“<b></b>”);
});
</script>

結果

wrapAll(~)
wrapAll対象

wrapAll対象



<section id=”wrapAll”>
<h5>wrapAll(~)</h5>
<p>wrapAll対象</p>
<p>wrapAll対象</p>
</section>

<script>
$(function(){
$(“#wrapAll p”).wrapAll(“<b></b>”);
});
</script>

結果

wrap対象に別の要素がある場合
wrapAll対象

wrapAll対象外

wrapAll対象



<section id=”wrapAll2″>
<h5>wrapAll(~)</h5>
<p>wrapAll対象</p>
wrapAll対象外<br>
<p>wrapAll対象</p>
</section>

<script>
$(function(){
$(“#wrapAll2 p”).wrapAll(“<b></b>”);
});
</script>

結果

table要素操作

<table id="tbl">
  <tr><th>1</th><th>a</th></tr>
  <tr><td>2</td><td class="aaa">b</td></tr>
  <tr><td>3</td><td class="aaa">c</td></tr>
</table>

var tbl = document.getElementById('tbl')

$('.aaa').each(function(index, elm){
   var val = tbl.rows[index + 1].cells[1].innerHTML;
    →val:b

   var val = elm.innerHTML;
    →val:b
});

jQuery エフェクト・アニメーション

設定値

ミリ秒の他に、"slow","normal","fast"を設定可能。

hide()

対象を非表示に
$(対象).hide();

show()

対象を表示させる
$(対象).show();

toggle()

対象が非表示の時は表示、表示されている時は非表示に
$(対象).toggle(s);

fadeOut()

段々薄く非表示に
$(対象).fadeOut(s);

fadeIn()

段々濃く表示させる
$(対象).fadeIn(s);

slideUp()

対象の下部がUpする様に非表示に
$(対象).slideUp(s);

slideDown()

対象の上部がDownする様に表示させる
$(対象).slideDown(s);

animate()

指定のアニメーションを実行させる
$(対象).animate( properties, [ duration ] , [ easing ] , [ complete ] )
$(対象).animate( properties, options )
の2種類の構文がある。

アニメーション無しで移動
$(要素).animate({ top: "0px", left: "0px" });

アニメーションの長さ(ミリ秒)
$(要素).animate({ top: "0px", left: "0px" } , 1000);
※1秒かけて移動(遅い)
$(要素).animate({ top: "0px", left: "0px" } , 10);
※0.01秒で移動(速い)
$(要素).animate({ top: "0px", left: "0px" } , 'slow');
$(要素).animate({ top: "0px", left: "0px" } , 'fast');
※ $(要素).animate( { top: "0px",}, { duration: 'slow'} )

加速(イージング)
swing:徐々に加速⇒減速して停止(デフォルト)
linear:加速0
$(要素).animate({ top: "0px", left: "0px" }, 'slow', "swing");
$(要素).animate({ top: "0px", left: "0px" }, 'slow', "linear");
※ $(要素).animate( { top: "0px",}, { duration: 'slow', easing: 'swing', } )

コールバック関数
$(要素).animate({ top: "0px", left: "0px" }, 1000, "linear", myFunc);
$(要素).animate({ top: "0px", left: "0px" }, 1000, "linear", function(){ ~ });
$(要素).animate({ top: "0px", left: "0px" }, 1000, "linear", myFunc1, myFunc2 );
※ $(要素).animate( { top: "0px",}, { duration: 'slow', easing: 'swing', step : myFunc1, complete: myFunc2 } )

メソッドチェーン
$(要素)
  .animate({ top: "0px", left: "0px" } , 1000)
  .animate({ top: "100px", left: "100px" } , 1000)
  .animate({ top: "0px", left: "0px" } , 1000)
  .animate({ top: "100px", left: "100px" } , 1000);

キュー
※即時実行
queue: false(デフォルト:true)
$(要素)
  .animate({ top: "0px", left: "0px", queue: false } , 1000)
  .animate({ top: "100px", left: "100px", queue: false } , 1000)

アニメーションの停止
$(要素).stop();

スクロール(animate)

<script type="text/javascript">
  $(function () {
    //クラス:aのtopからの絶対位置を取得
    var iniPlace = $(".a").offset().top;
    
    //↑位置へスクロール
    $("html,body").animate({ scrollTop: iniPlace }, "fast");
  })
</script>
<div>
  <p class="a">A</p>
  <p class="b">B</p>  ←ここへスクロールされる
  <p class="c">C</p>
<div>

※画面最上部へスクロール
$("html,body").animate({ scrollTop: 0 }, "fast");