ブログBLOG

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

更新日：2012/10/05

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

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

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

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

click! →

← click!

HTML


&lt;div class="demo-container"&gt;
    &lt;div class="div1"&gt;click! &rarr;&lt;/div&gt;
    &lt;div class="div2"&gt;&larr; click!&lt;/div&gt;
&lt;/div&gt;

<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;
}

.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);