Edited at

jQuery 仮想HTMLでanimate

More than 1 year has 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付きで簡単にアニメーションできちゃうのです。

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