I fear it won't help much but you can try caching some values outside
the event handler:
var mx=$(window).width(), my=$(window).height(), $k=$('#k');Also, you set the duration in the wrong place, that should be in the second argument: http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback And why is it 1ms? On Nov 21, 8:16 pm, bnlps <[EMAIL PROTECTED]> wrote: > 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>
