JQUERY - 从左上/右上或左/右下更改 Div 维度答案

【问题标题】：JQUERY - Changing Div Dimension , from top left/right or bottom left/rightJQUERY - 从左上/右上或左/右下更改 Div 维度
【发布时间】：2015-01-03 17:28:17
【问题描述】：

我正在写我的个人网站，我有 4 个 div 包含在一个容器 div 中（见图）

现在点击时我想将点击的 div 调整为容器的 div 尺寸

我做到了。

现在我的问题是有办法调整大小：

从右上角到左下角的第二个
从左下到右上的第三个
从右下角到左上角的第四个

HTML

http://pastebin.com/mid0ssC6

CSS

http://pastebin.com/sx4BL9Jv

JQUERY

http://pastebin.com/1yG3vkew

我找到了解决方案，我会尽快发布：)

【问题讨论】：

如果有帮助，这里是 OA 描述的谜题的 jsBin：jsbin.com/sinug/1/edit?html,css,js,output
@Kolban 我没有想到 jsBin，谢谢你的贡献：D
在您的逻辑中，如果 state==1 ... state = 0 - (1+state)。也许改用布尔值。如果 state == true ... state = !state。这不是您的难题的任何答案，只是在我查看代码时对代码的评论。
@Kolban 我用这个表达式而不是写 If (state==1) then state = 0 ;否则状态 = 1 ;
用缺少的变量初始化更新了 jsBin：jsbin.com/sinug/3/edit?html,css,js,output

标签： jquery css jquery-animate height width

【解决方案1】：

这是不完整的答案，还有另一个问题，但从逻辑上讲，问题的解决方案如下：

http://pastebin.com/izrfcJDq

显然，div 的位置必须改为相对位置。

问题是while循环必须定时。

原生 javascript 方法 SetInterval() 不适用于此目的，因为它在循环结束后仍会继续运行。

【讨论】：

【解决方案2】：

要执行您正在寻找的动画级别，需要改变一些想法。目前，您将图像布置为 4 个 <div> 元素彼此跟随并换行，因为它们的容器的宽度会导致这种情况。相反，您需要在四个角上定位然后使用 CSS 定位。见relative positioning。

现在，为了对您希望的项目进行动画处理，您需要知道其最终所需的大小和最终所需的端点位置。然后，您将在所需的持续时间内从起始大小和位置动画到这些最终值。调整大小将使其成为最终所需的大小，但您还必须以与调整大小相同的速率移动图像的位置。例如，当新图标大 50% 时，它的位置应该是从开始到结束的 50%。如果我们认为图像的左上角是图像的锚定位置，那么它必须在每个“刻度”中移动，以使移动图像的固定角保持在完全相同的位置。

我知道这不是适合您的编码解决方案，但 Stack Exchange 的本质是“回答问题”而不是“给我编码解决方案”。

【讨论】：

是的，这基本上是这个概念，但我在问是否有一个 jquery 选项/函数可以帮助我而不是编写代码。如果没有成熟的解决方案，我认为我应该移动图像试图保持锚定到它自己的角落，所以： - 1% 调整大小 - 重新定位直到 div 大小为 100%
@MartinMcFlyDeLuca 不幸的是，我不知道这样一个成熟的解决方案或模板。这并不意味着一个不存在，只是我不知道在哪里可以找到一个。对不起，我的朋友。
一如往常，我不得不苦干xD