[jQuery] jquery customised easing
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 #33;
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
Re: [jQuery] jquery customised easing
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 #33;
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
Re: [jQuery] jquery customised easing
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 #33;
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;
Re: [jQuery] jquery customised easing
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 #33;
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;
Re: [jQuery] jquery customised easing
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 #33;
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
