JQUERY - Changing Div Dimension , from top left/ri

问题:

i'm writing my personal website , and i have 4 divs contained in a container div (see the image)

Now on click I wanted to resize the clicked div to the container's div dimension

I did it.

Now my question is there is a way to resize:

• the second one to top-right to bottom left
• the 3rd one to bottom left to top right
• the 4th one from bottom-right to top-left

HTML

http://pastebin.com/mid0ssC6

CSS

http://pastebin.com/sx4BL9Jv

JQUERY

http://pastebin.com/1yG3vkew

---

---

I Found a Solution , I will post it soon :)

回答1:

To perform the levels of animation you are looking for will take some change in thinking. Currently, you have your images laid out as 4 <div> elements following each other and wrap because the width of their container would cause such. You would instead need to position then using CSS positioning at the four corners. See relative positioning.

Now, in order to animate the item you wish you would need to know its final desired size and its final desired endpoint position. You would then animate from the starting size and position to those final values over the desired duration. The resizing will make it the final desired size but you will also have to move the position of the image at the same rate as the resize scale. For example, when the new icon is 50% larger, its position should be 50% of the way from the start to the end. If we consider that the upper/left of the image is where the image is anchored then it has to move in each "tick" in such a way that the fixed corner of your moving image stays in exactly the same place.

I realize that this isn't a coded solution for you but the nature of Stack Exchange is more "answering questions" than it is "code me a solution".

回答2:

This is incomplete answer ther is another problem but logically the solution of the problem is the follow :

http://pastebin.com/izrfcJDq

Obviously , divs position has to be changed to relative.

The problem is that the while cycle has to be timed .

The native javascript method SetInterval() is not good for this purpose because it still continue going after the cycle is ended .