jQuery 1.8 になって CSSベンダープレフィックスが自動で追加されるようになったみたいなので試してみる

投稿日:2012年10月5日

jQuery 1.8 がリリースされています。

おもな改善点は、セレクタエンジン「Sizzle」の高速化、CSSベンダープレフィックスの自動化、モジュール化機能、アニメーション処理刷新、といったところでしょうか。

そのながで個人的に一番利用頻度のありそうな CSSベンダープレフィックスの自動化について試してみました。

↓クリックして動きを確認するデモ ※ブログ内のデモはPCのみです

click! →
← click!

HTML


<div class="demo-container">
    <div class="div1">click! →</div>
    <div class="div2">← click!</div>
</div>
  

CSS


.demo-container {
    height: 100px;
    position: relative;
    overflow: hidden;
    line-height: 100px;
}

.div1,
.div2 {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    text-align: center;
}

.div1 {
    background-color: pink;
}

.div2 {
    position: absolute;
    top: 0;
    left: 100%;
    background-color: aqua;
}
  

JavaScript


(function($) {

    $('.div1, .div2').css({
        transition: '.5s'
    });

    $('.div1').bind('click', function() {
        $('.div1, .div2').css({
            transform: 'translateX(-100%)'
        });
    });

    $('.div2').bind('click', function() {
        $('.div1, .div2').css({
            transform: 'translateX(0)'
        });
    });

})(jQuery);
  

chromeで確認したところ
chromeキャプチャ

firefoxで確認したところ
firefoxキャプチャ

IE9で確認したところ
IE9キャプチャ

まぁ… IE9は transitionに対応していないため transformしか反映されてませんが、そこは IEクオリティってことで。。

これまで指定なしと合わせて5つ ( -webkit- / -moz- / -o- / -ms- ) 書かなければならなかったのにくらべて、ずっとすっきりしていいですね。

藤崎

関連記事

カテゴリー: JavaScript, jQuery
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル