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.
