Wow, I can't believe how easy that is..!!! Many thanks Richard :D One last little thing... I don't suppose you could help me condense my code down in to using functions too? ^_^ Don't worry if not - you've been a great help.
Cheers! Tim Richard D. Worth-2 wrote: > > The easing plug-in doesn't care what property is being animated: > > $('#side').animate({backgroundPosition: "71px 9px"}, 500, 'easeOutBack'); > > - Richard > > On Wed, Dec 30, 2009 at 9:50 AM, t1mmie <t1m...@hotmail.com> wrote: > >> >> 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. >> >> > > -- View this message in context: http://old.nabble.com/jquery-customised-easing-tp26967564s27240p26968903.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.