javascript - jQuery animation issues -

It's hard to understand, so I'll paste the function, and tell me what it does

Function Stop (R) {if (r! == Undefined) {$ ('# close'). Attr ('name', '1'); $ ('#closed') CSS ({top: 30, left: 30}); $ ('#closed') Html ('First Click Here'); } And {switch ($ ('# off'). Atri ('name')) {case '1': $ ('# off'). Atri ('name', '2'); $ ('#closed') Animate ({bottom: 30, right: 30}, 1000); $ ('#closed') Html ('Click Here Now'); break; Case '2': $ ('#closed') Attri ('name', '3'); $ ('#closed') Animate ({bottom: 30, left: 30}, 1000); $ ('#closed') Html ('A now click here'); break; Case '3': $ ('# close') Ether ('name', '4'); $ ('#closed') Animate ({top: 30, right: 30}, 1000); $ ('# Close') Html ('and finally click here'); break; Case '4': $ ('# close'). Remove (); break; If you need an explanation, then it becomes

1. The closed function is called for the first time as close (1)

   . It determines the position above: 30 and left: 30. Keep in mind that its position in the stylesheet is already complete. This first part works, and wherever I want to choose it, it is followed.

2. The #close element has an authorization specified by close () . Every time it is clicked, as you can see, there is a different action. Everything works fine except for the animation (i.e. HTML and name attribute change)
3. On the last click, the element disappears successfully.

Do anyone have any ideas?

Cheers

The first time you < Code> left: set 30px . The second time you set right: 30px but left: 30px is still set. They are not special properties; The setting is thought to extend the element to fit the volume between 30px-left-edge and 30px-right-edge.

Although I think you have off element this address left: 30px; Correct: 30px; Width: 100px which is where correct property can be ignored, no movement is causing the same top / below / height .

In a left-hand alignment and right aligned position, you will only need a script for one of the left or correct to find out that the right side For the status of the left the pixel position will be, you have to see the size of the block containing the element. The inserted block assumes that the whole document is:

  & lt; Div id = "close" style = "background: red; position: full; width: 100px; height: 50px;" & Gt; Foo Lieutenant; / Div & gt; & Lt; Script type = "text / javascript" & gt; Var close_step = 0; Click $ ('# Close') (function () {if (close_step> = 4) {$ (this) .remove (); return;} var w = $ (window) .width () - $ (this) .width () - 30 * 2; var h = $ (.hit) - $ (this) .hit () - 30 * 2; var x = [0, 1, 0, 1] [pass_step] * W + 30; var y = [0, 1, 1, 0] [close_step] * h + 30; var pos = {left: x + 'px', above: y + 'px'}; if (close_step == = 0 $ (this) .css (pause); and $ (this) .mate (pg); $ (this) .text (['click here first', 'now click here,' and now click here Click ',' and finally click here '] [close_step]); close_step ++;} Click (); & lt; / script & gt;  

if Kiss # shutdown If you were nested with the position in the block, then you will need to see its width / height instead of window .