background-sizeをアニメーションさせる

background-positionをアニメーションさせる - みかづきブログ その3

昨日はbackground-positionをアニメーションさせていましたが、今回はbackground-sizeをアニメーションさせてみました。実装方針は変わりません。

DEMO

JavaScript

(function(win, doc, $) {

    "use strict";
    
    var $box = $(".box"),
        $model = $({x: 100, y: 100}),
        TARGET = 120,
        INTERVAL = 1000 / 30;
    
    move();
    setInterval(render, INTERVAL);
    
    function move() {
        $model.animate({x: TARGET, y: TARGET}, 100)
                     .animate({x: 100, y: 100}, 100, function() {
                         setTimeout(move, 1000);
                     });
    }
    
    function render() {
        $box.css({backgroundSize: $model[0].x + "% " + $model[0]. y + "%"});
    }
    
})(this, document, $);

たまにはこんな日もありますね。
今回は以上です。