Hey Richard, thanks for your reply!! Yeah I was aware of the easing plug-in but I didn't think it could be used in the way I need it? As I am positioning background image..? Please correct me if I'm wrong - better yet - show me how? :D
Thanks again Richard D. Worth-2 wrote: > > 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 <t1m...@hotmail.com> 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. >> >> > > -- View this message in context: http://old.nabble.com/jquery-customised-easing-tp26967564s27240p26968258.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
