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 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 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]
>> >> > >> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
>> >> http://www.w3.org/1999/xhtml"; xml:lang="en" >
>> >>
>> >>
>> >> > >> src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
>> >> type="text/javascript">
>> >>
>> >>
>> >>
>> >>
>> >>
>> >>#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 {
>> >>
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 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 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]
> >> >> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> >> http://www.w3.org/1999/xhtml"; xml:lang="en" >
> >>
> >>
> >> >> src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
> >> type="text/javascript">
> >>
> >>
> >>
> >>
> >>
> >>#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;
> >>
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 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] >> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> >> http://www.w3.org/1999/xhtml"; xml:lang="en" > >> >> >> > src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"; >> type="text/javascript"> >> >> >> >> >> >>#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
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 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] > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > http://www.w3.org/1999/xhtml"; xml:lang="en" > > > > src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"; > type="text/javascript"> > > > > > >#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; >} > > > > > > > > > > webdesign news > seo faq >
