Question

I am looking for some help in a jquery script I am in the process of creating, ill try and break it down in plain english.

The script works off the back of a grid utilised via a <ul></ul> element, each <li></li> forms the individual component of the grid.

If you hover over a list-item the jquery script will then expand that element to take up the entire dimensions of its parent through an animation. It stays there until the cursor is moved off and should resize itself back to its original position and it is there which I am having my problem (it seems the variable from the expand function is not passing properly into the shrink function).

Hopefully that helps give a brief understanding, if not please view the jsfiddle example

http://jsfiddle.net/EzYeH/3/

Thank you in advance anyone who could decode my ramblings and help.

Dan.

Answer 1

I believe that I understood what you were trying to do, and here is one possible solution: http://jsfiddle.net/EzYeH/4/

To answer your fundamental question, one way to “pass” data from your starting function to your ending function is to store it as data- on the element itself:

$this = $(this);
var position = $this.position();
$this.data('leftPos', position.left + 'px');
$this.data('topPos', position.top + 'px');