jQuery 仮想HTMLでanimate #jQuery

タイトルの通り、アホな事なことを思いついたので試してみた。

test2.htm

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>

$(function(){
    $("#start").on('click', function(){

        var virtual = $("<div style='width:0px'/>");

        virtual.animate({width: "100px"}, {
            duration: 2000,
            step: function(now, tween){
                $('#step').text(now);
            }
        });
    });
});


</script>

<head>

<body>

<button id='start'>開始</button><br>
step: <span id='step'>0</span><br>

</body>
</html>

virtualのセレクタはdocument内には存在しない。なんせ生HTMLだもの。

なので普通に考えてこれは動きそうにない。

でも実際は・・・

うおおおおおおｗｗｗｗｗｗ

これは何か色々捗りそうな気がする！！！

追記
興奮しすぎて何も考えずに投稿してしまいましたが、結局わたしが何に興奮して鼻血を出してたかというと

要はanimateで作り出される数値を使えば、直接cssプロパティを変更させるだけでなく、それを元に自由にいろんな動きを生み出せるということなのです( *ﾟωﾟ)=3 ﾌﾝｽ

こんな感じの永久ループなスクロールなんかも、Easing付きで簡単にアニメーションできちゃうのです。

これはワクワクしませんか？ね？ね？