Here's a quick modification of the code (untested):
$('#menu li').each(function(i) {
$(this).pause( i * 150 ).animate({left:0}, {duration: 1000,
easeMethod: 'backout'});
});
It seems like it would make more sense to animate the 'left' attribute
- to get it to the right spot. That way, the animation would become a
lot simpler too.
--John
On 9/14/06, kenton.simpson <[EMAIL PROTECTED]> wrote:
>
> Thats cool, and works well in ie6,ff1.5 and opera9
>
>
> nezza wrote:
> >
> > Playing around with jQuery yesterday, managed to replicate the
> > mootools.net side menu.
> > Thanks to the fantastic Easing & Pause Plugins!
> >
> > Take look:
> >
> > <html>
> > <head>
> > <script src="jquery-1.01.js" type="text/javascript"></script>
> > <script src="jquery.easing.1.0e.js"
> > type="text/javascript"></script>
> > <script src="jquery.easing.extensions.js"
> > type="text/javascript"></script>
> > <script src="pause.js" type="text/javascript"></script>
> > <script type="text/javascript">
> > <!--
> > $(document).ready(function(){
> >
> > var timer = 0;
> >
> > $('#menu li').each(function() {
> >
> > timer += 150;
> > $(this).css({paddingLeft: "0"});
> > $(this).pause(timer,
> > "fx").animate({paddingLeft:130}, {duration:
> > 1000, easeMethod: 'backout'})
> > });
> > });
> >
> > //-->
> > </script>
> > <style type="text/css">
> > #menu { position: absolute; left: -160px;}
> > #menu li { font-family: tahoma; font-size: 10pt;
> > font-weight: bold;
> > color: #FFFFFF; padding-top: 3px; }
> > #menu li a { display: block; background-color:
> > #FFFFFF; padding: 5px
> > 5px 5px 5px; width: 100px; border: solid 1px #0000FF; }
> > </style>
> > </head>
> > <body>
> > <ul id="menu">
> > <li class="big tools"> / <span>mootools</span> </li>
> > <li class="big demos"> # Demos (later) </li>
> > <li> # Moo Fx </li>
> > <li> # Moo Dom </li>
> > <li> # Moo Ajax </li>
> > <li> # Moo Drag </li>
> >
> > <li class="big download"> /download/release Download
> > </li>
> > <li> /download/release Release </li>
> > <li> /download/svn Svn </li>
> > <li> /changelog Svn Changelog </li>
> > </ul>
> > </body>
> > </html>
> >
>
> --
> View this message in context:
> http://www.nabble.com/A-jQuery-implementation-of-mootools.met-menu-tf2271237.html#a6311001
> Sent from the JQuery forum at Nabble.com.
>
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
--
John Resig
http://ejohn.org/
[EMAIL PROTECTED]
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
