Help us understand the problem. What is going on with this article?

jQuery 仮想HTMLでanimate

More than 3 years have passed since last update.

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

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だもの。

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

でも実際は・・・

test.gif

うおおおおおおwwwwww

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

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

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

test.gif

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away