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 <t1mmie@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 <t1mmie@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.
>>
>>
>
>
--
View this message in context: http://old.nabble.com/jquery-customised-easing-tp26967564s27240p26968903.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
No comments:
Post a Comment