Past

jQuery only

Gif Anime

Gif画像を使ったアニメーション。現在でもその特性をいかした分野で残っている。

Flash

Webサイト全体がフラッシュで作られたり、一世を風靡した。脆弱性の問題で衰微。

jQuery

CSS3が出る前はjQueryだけで非コーダーでもアニメーションが実装でき、爆発的に流行。

現在でもCSSで指定できるアニメーションには限りがあるので、
jQueryや他のライブラリを利用することは多い。
jQueryの場合、実装したい機能のjQueryライブラリが大量に出ているので、
導入がしやすい。

Now

jQuery + CSS3

CSSのみでできるものはCSSで。この考え方が主流。

この考え方の肝は何か動作が始まるための「トリガーを設定する」こと。
例えば、クリックされたら、チェックボックスにチェックされたら、要素をHoverしたら(これはCSSの:hoverで実装できる)、こういうトリガーをjQueryで仕込んでおいて、実際要素がどのように動作(アニメーション)するかは、CSSで設定しておく。

Example

クリックで発動

                            
$(document).ready(function(){
    $('.selector01').on({
       'click':function(){
            $('target01').toggleClass('active');
        }
    });   
});

selector01

例えばフェイドインしながら大きくなる。

同意事項

                            
$(document).ready(function(){
    $('.selector02').on({
       'change':function(){
            if ($(this).is(':checked')){            
                $('target02').prop('disabled', false);
            }else{
                $('target02').prop('disabled', true);
            }
        }
    });   
});

同意事項

ダミーダミーダミーダミーダミーダミーダミーダミー
ダミーダミーダミーダミーダミーダミーダミーダミー
ダミーダミーダミーダミーダミーダミーダミーダミー
ダミーダミーダミーダミーダミーダミーダミーダミー
ダミーダミーダミーダミーダミーダミーダミーダミー
ダミーダミーダミーダミーダミーダミーダミーダミー
ダミーダミーダミーダミーダミーダミーダミーダミー
ダミーダミーダミーダミーダミーダミーダミーダミー

同意するThank you!!

選択した要素と対応する要素が発火

                            
$(document).ready(function(){
    $('.selector03 li').on({
       'click':function(){
            var index = $('.selector03 li').indexOf(this);
            $('.target03 tr').eq(index).addClass('active');
        }
    });   
});

1	項目1	項目2
2	項目1	項目2
3	項目1	項目2
4	項目1	項目2
5	項目1	項目2

ある要素までスクロールしてきたら

                            
$(window).scroll(function (){  
    if($('body').hasClass('styles')){
        var selectorTop = $('.selector03').offset().top;
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        if(scroll >= selectorTop) {
            $('.target04').addClass('active');
        }
        /*else {
            $('.target04').removeClass('active');
        }*/
    }
});

Do you like giraffe??

あんまり使いどころがないけど

                            
var click_num = 0;
$('.selector05').on({
    'click':function(){
        $('.target05').text(3-click_num-1);
        if(click_num==2){
            $('body').addClass('rotate');
            click_num = 0
            $('.target05').text(3);
        }else{
            $('body').removeClass('rotate');
            click_num ++;
        }
        return false;
    }
});

3回クリックすると…？

こういうイタズラもできます。