hi people,

i am new to jquery but it already made my thoughts spinning around what cool stuff can be done using jquery.

i have the idea for an animation that i intermediarily call "character group sliding". what it does is, sliding out characters of a string, which initially sit on top of each other, into their correct position on the screen. or vice versa, folding a string into chracters which sit on top of each other.

eg. the string "12345". initially the characters would sit on top of each other (which i can not illustrate in plain text in this post). then the animation would start to slide them out - say to the right. meaning chracter '5' would be slid fastest, chracter '1' would not be slid. after the animation ended the characters would resemble "12345" correctly.

now firstly i need to know if such functionality already exists as a core feature, plugin or ui element.

i havent found anything so far. so secondly i would start to implement this functionality. this rises the question if it is a topic for a plugin or for an ui element.

and thirdly i strongly appreciate all thoughts and hints how this can be done most efficient and elegant.

my approach as far as i understood and know jquery (that is one day), would be to use the animate method to slide a character from position A to position B. nothing special so far.

the destination position of a character can be calculated from the destination position of the first character plus the width of all preceeding characters (plus the desired spacing between the chars). thus every character has to be "housed" in a html-element which sizes automatically to encase its contents. a "span" would do that i guess.

and finally i need to know which position each character has. there are several ideas.

A)
presuming that all divs which will be animated are of a common class - say "stringA", each would have to be of an additional and distinct class which can be associated with the common class and identifies its position in the string, eg "stringA0", "stringA1", "stringA2" and so on.

the jquery syntax would then look something like this:
$(".stringA").cgslideout(
  <destination position of first char>
  );
eg:$(".stringA").cgslideout(100, 100);

B)
More elegant would be to state the final string as a parameter. finding the right divs would then be a job of the plugin. the plus is, the divs do not have to "numbered" with an additional class.

the syntax would then look something like this
$(".stringA").cgslideout(
  <string that has to be resembled by the characters>,
  <destination position of first char>
  );
eg:
$(".stringA").cgslideout("12345", 100, 100)

C)
a third (also somewhat brutal) approach would be to state all ids in the correct order as parameters.

the syntax would then look something like this
$(".stringA").cgslideout(
  <identifiers of all divs in correct order>,
  <destination position of first char>
  );
eg:
$(".stringA").cgslideout({"cid0", "cid1", "cid2", ... }, 100, 100)


the inverted functionality in all cases would be something like:
$(".stringA").cgslidein(
  <destination position of all divs>
  );
eg:
$(".stringA").cgslidein(0, 100)


while writing this post, it fell into my mind that this effect when abstracted is something like "a group of characters, where each char has its individual starting position has to be slid in a destination position where the group resembles a given string" and the inverted functionality "characters of a group of characters resembling a given string on screen, have to be slid from their starting position to individual destination positions". i just wanted to state this here to document it for future purposes. but for now i want to stick to the functionality i described above.

thanks in advance for comments and participation. regards,
arthur