I have coded a web page using jQuery that loads an array of images into a Parent DIV. Each image is placed into its own Image DIV (inside of the Parent DIV). Each Image DIV is then given its own X and Y coordinates using another array in my code, so that I can control the exact placement of each Image DIV within the original Parent DIV.
Once the web page is loaded, the user can then drag each Image DIV with their mouse to anywhere on the page that they would like to leave it on the page. So, a user can end up leaving the Image DIVs anywhere on the page.
--- All of the above works and has been tested... no problems there. What I need is for someone to help me out with the below. ---
I have coded a "Reset DIV" beneath all of the Image DIVs (a DIV that cannot be dragged). What I would like to happen is that when a user clicks the image within the "Reset DIV"... that all of the Image DIVs go back to the original location and layer order that they started at when the web page was first loaded. I would like this reset to happen for all Image DIVs in a manner that shows the transition (I don't want the Image DIVs to just disappear and reappear... I want the Image DIVs to slide back). I would like any code written to let me dictate:
- The speed of the slide transition (all Image DIVs can re-use the same speed, there is no need to set a speed for each Image DIV)
- Whether the Image DIVs all slide back at (1) the same time, or (2) one after the other from the way that they were arranged in the array
Please remember that I already have all of the working code written for everything up to the reset transition to happen, and I will be happy to share it for your modification. There is no need to start from scratch! :)