This can be achieved by using the easing plugin http://plugins.jquery.com/project/Easing
which is included in the jQuery UI Effects Core. See here for a demo: http://jquery-ui.googlecode.com/svn/trunk/demos/effect/easing.html I think the one you're looking for is 'easeOutBack' - Richard On Wed, Dec 30, 2009 at 8:37 AM, t1mmie <[email protected]> wrote: > > Hey all. I'll be quite amazed if anyone can help me with this one. I've > been > scouring the internet trying to find a tutorial on this, but no such luck!! > > I'm putting together my own little side navigation and I have an affect in > my mind that I want to achieve and I'm sort of half-way there. > > I've thrown together [URL=http://www.webhero.co.uk/help/]a demo, > here[/URL] > ( http://www.webhero.co.uk/help ) of what I've made so far. > > I basically want the background to slide up and down depending on what menu > the mouse hovers on to, with an easing (or bouncing) effect when you move > over each one. I want the bouncing thing to go both ways, so that if the > background is at the bottom and you hover over a link above, the background > moves a little past the final result and then back -- so wherever it moves, > it bounces or eases a little into place. > > Another thing to consider is that whatever page the user is on, the little > bar will start off and go back to there - so in the demo we're presuming > the > user is on the 'web design' page. > > (You'll need to see the demo by now to see what I mean :P) > > As you can see, I've programmed this to work fine if you're moving your > mouse top to bottom, but if you go from bottom to top - you'll see in the > code that I'll need to put some conditional statements around the > animations > to test whereabouts the background currently is - and that's what I need > help with really. Also if anyone has a few tips on how I can shorten down > my > javascript code here that would be awesome :) > > Or, if anyone has a better way of achieving what I'm trying to altogether > then I gratefully welcome anyone's thoughts. > > It'll be easier to view the source but I'll include the html and JS here. > > [code] > <!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"; xml:lang="en" > > > <head> > <script > src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"; > type="text/javascript"></script> > <script src="js.js" type="text/javascript"></script> > <script src="bg.js" type="text/javascript"></script> > <script src="png.js" type="text/javascript"></script> > > <style> > #side { > min-height:600px; > height:600px; > width:243px; > float:left; > background:url(sidebg.jpg) no-repeat #333333; > background-position:71px 9px; > } > > #side li, #side ul { > list-style:none; > padding:0; > margin:0; > float:left; > } > > #side a * { > display: none; > } > #side a, #side a .hover { > height:36px; > width:172px; > position:relative; > display:block; > background:url(side.png); > } > > #side a.webdesign { > margin:10px 0 7px 71px; > width:172px; > background-position:0 0; > } > #side .highlight a.webdesign:hover, #side > a.webdesign .hover { > background-position:-172px 0; > } > #side a.seo { > margin:5px 0 7px 71px; > width:172px; > background-position:0 -40px; > } > #side .highlight a.seo:hover, #side a.seo .hover { > background-position:-172px -40px; > } > #side a.blog { > margin:5px 0 7px 71px; > width:172px; > background-position:0 -80px; > } > #side .highlight a.blog:hover, #side a.blog .hover { > background-position:-172px -80px; > } > #side a.contact { > margin:5px 0 7px 71px; > width:172px; > background-position:0 -120px; > } > #side .highlight a.contact:hover, #side a.contact > .hover { > background-position:-172px -120px; > } > > </style> > > </head> > > <body> > > <div id="side" style="background-position: 71px 9px"> > <ul> > <li class="highlight"> webdesign news </li> > <li class="highlight"> seo faq </li> > <li class="highlight"> blog contact </li> > <li class="highlight"> contact contact </li> > </ul> > > </div> > > </body> > [/code] > > and the javascript (jquery) > > [code] > $(document).ready(function(){ > > // Side // > > //var currentpos = $('#side').backgroundPosition(); > > $("#side a.webdesign").hover(function () { > $('#side').stop(true, false) > $('#side').animate({backgroundPosition: "71px 4px"}, > 350); > $('#side').animate({backgroundPosition: "71px 9px"}, > 150); > }, > function () { > $('#side').stop().animate({backgroundPosition: "71px > 9px"}, 400); > }); > > $("#side a.seo").hover(function () { > $('#side').stop(true, false) > $('#side').animate({backgroundPosition: "71px > 63px"}, 350); > $('#side').animate({backgroundPosition: "71px > 58px"}, 150); > }, > function () { > $('#side').stop().animate({backgroundPosition: "71px > 9px"}, 400); > }); > > $("#side a.blog").hover(function () { > $('#side').stop(true, false) > $('#side').animate({backgroundPosition: "71px > 110px"}, 350); > $('#side').animate({backgroundPosition: "71px > 105px"}, 150); > }, > function () { > $('#side').stop().animate({backgroundPosition: "71px > 9px"}, 400); > }); > > $("#side a.contact").hover(function () { > $('#side').stop(true, false) > $('#side').animate({backgroundPosition: "71px > 159px"}, 350); > $('#side').animate({backgroundPosition: "71px > 154px"}, 150); > }, > function () { > $('#side').stop().animate({backgroundPosition: "71px > 9px"}, 400); > }); > > > > }); > [/code] > > Thanks to you all in advance :) > -- > View this message in context: > http://old.nabble.com/jquery-customised-easing-tp26967564s27240p26967564.html > Sent from the jQuery General Discussion mailing list archive at Nabble.com. > >
