Page 1 of 1

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

Posted: Fri Sep 12, 2008 8:56 pm
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!

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

Posted: Sat Sep 13, 2008 4:36 am
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"});

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

Posted: Sat Sep 13, 2008 2:39 pm
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?

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

Posted: Sun Sep 14, 2008 4:03 pm
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?

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

Posted: Sun Sep 14, 2008 9:22 pm
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?

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

Posted: Mon Sep 15, 2008 3:58 am
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

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

Posted: Mon Sep 15, 2008 10:45 am
by pickle
This is possible with jQuery. Read: http://docs.jquery.com/Effects/animate.

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

Posted: Mon Sep 15, 2008 2:10 pm
by kaszu
Wow, i didn't knew that. Thanks pickle

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

Posted: Mon Sep 15, 2008 5:00 pm
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: