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.
No comments:
Post a Comment