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.
>
>
