[jQuery] smoother .animate()?
Hi, kids --
there's a nice Flash site ... marcecko dot com ( especially, the
window-content-movement, mouse.x/y)
... ported to html/jQ, but couldn't find a way to realise the "smooth
sliding" part while moving; it's f'd, scratchy.
any solutions? or, a Flash-only thing?
thanks!
-B
now, have a look:
(tested on FF3, IE7 -- XP)
-----------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>jQx</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style type="text/css" media="all">
<!--
html{width:100%;height:100%;overflow:hidden;}
body,div{margin:0;padding:0;}
div{position:absolute;left:0px;top:0px;width:1600px;height:1200px;}
span{position:absolute;}
-->
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/
files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var mx,my;
$(function(){
$().mousemove(function(e){
mx=$(window).width();
mx=Math.ceil((-e.pageX/mx*(16E2-mx)));
my=$(window).height();
my=Math.ceil((-e.pageY/my*(12E2-my)));
$('#k').dequeue().animate({left:mx,top:my,duration:1}); // !
// $('#k').css({left:mx,top:my}); ... 1:1
});
});
//]]>
</script>
</head>
<body>
<div id="k">
<span style="top:0px;left:0px;height:50px;width:50px;background-
color:#cff;"></span>
<span style="bottom:0px;left:1550px;height:50px;width:50px;background-
color:#e10;"></span>
<span style="top:0px;left:1550px;height:50px;width:50px;background-
color:#0cc;"></span>
<span style="top:1150px;left:0px;height:50px;width:50px;background-
color:#3fa;"></span>
<span style="top:50px;left:300px;height:100px;width:300px;background-
color:#333;"></span>
<span style="top:300px;left:200px;height:700px;width:150px;background-
color:#f6c;"></span>
<span style="top:500px;left:400px;height:500px;width:850px;background-
color:#aba;"></span>
<span style="top:300px;left:600px;height:100px;width:950px;background-
color:#ff0;"></span>
</div>
</body>
</html>