jQuery.animate({top: "+25px"});

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

jQuery.animate({top: "+25px"});

Post by JellyFish »

Hey jQuery experts. I was wondering whether this is possible or not:

Code: Select all

 
jQuery.animate({top: "+25px"});
 
that is, add to the top position of an element relative to it's current position, instead of setting the absolute value? Is there a way to do this? The above isn't working.

Thanks for reading. All help is appreciate.

Cheers!
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: jQuery.animate({top: "+25px"});

Post by kaszu »

No, it's not.
One solution would be to animate use margin-top, if it hasn't been used
or

Code: Select all

abcde.animate({top: parseInt(abcde.css('top')) + 25 + "px"});
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: jQuery.animate({top: "+25px"});

Post by JellyFish »

That's the way I'm doing it at the moment. Thanks for your reply.

It would be nice to have this feature in jQuery. It would seem like this would be possible sense the animate method would be dealing with the current elements. But then there's the issue of not knowing when it's a negative absolute value or a negative relative value:

Code: Select all

 
elements.animate({top: "-25px"}); //Negative absolute or relative?
 
So maybe the + character could be the thing that denotes relativity:

Code: Select all

 
elements.animate({top: "+-25px"}); //Negative relative to the current top value
elements.animate({top: "-25px"}); //Negative absolute
 
What do you (all of you) think?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: jQuery.animate({top: "+25px"});

Post by kaszu »

I believe +-25px is confusing and shouldn't be part of the jQuery core, because '+-' is not a valid css value and this would add an exception.
If elements top value is '25em', then what '+30px' or '+30%' means?
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: jQuery.animate({top: "+25px"});

Post by JellyFish »

kaszu wrote:I believe +-25px is confusing and shouldn't be part of the jQuery core, because '+-' is not a valid css value and this would add an exception.
If elements top value is '25em', then what '+30px' or '+30%' means?
I see what issues you are saying it has. +-25 does seem confusing, but really what it means to say is add -25, which when you add a negative number it's the same as subtracting the equivalent positive number.

Also adding px values to a em value wouldn't make sense, like you said. So, maybe the px, em, etc. extensions shouldn't be used in the relative-value syntax. In that case +- wouldn't be needed at all. In fact maybe just the integer form is necessary.

For example:

Code: Select all

 
elements.animate({top: "+25"}); //add 25 px, em or % relative to the current value and depending on the value type(px, em, %, etc.).
elements.animate({top: "-25"}); //subjact 25 values relative to the current value and value type
elements.animate({top: "-25px"}); //set to absolute -25px
elements.animate({top: "+25em"}); //set to positive 25 em absolutely, same as 25em
 
basically any string starting with a + or a - and ending without a value type (em, px, etc.) should be treated as a relative value.

I know it's not valid css. Besides I don't think 25, without a type extension, is valid either. What are your thoughts on this?
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Re: jQuery.animate({top: "+25px"});

Post by Zoxive »

Im sure it wouldn't be that hard to add.
You could even extend it and add it youself.

http://docs.jquery.com/Utilities/jQuery.extend
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: jQuery.animate({top: "+25px"});

Post by pickle »

This is possible with jQuery. Read: http://docs.jquery.com/Effects/animate.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: jQuery.animate({top: "+25px"});

Post by kaszu »

Wow, i didn't knew that. Thanks pickle
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: jQuery.animate({top: "+25px"});

Post by JellyFish »

pickle wrote:This is possible with jQuery. Read: http://docs.jquery.com/Effects/animate.
Awesome pickle! += and -=... Now why didn't I think of that? :lol:
Post Reply