Javascript 尝试使用jquery平滑地移动div

因此，我有一个foreach循环，它引入了4个div和一个外部图像（在代码段中替换为“虚拟”内容以获得一个工作示例），当我单击图像时，“隐藏”内容应该出现。我搞不清楚的问题是如何将div平滑地过渡到侧面。 例如，如果我单击左上角，左下角只会跳到右下角，如果我向后切换，所有内容都会跳回，而不是平滑过渡

我基本上是在jquery方面寻求一些帮助，以使转换看起来平滑，而不是上下左右跳跃

$（“.icon”）。单击（函数（）{
$（this.attr（'id'，'full_size'）；
$article=$（本）；
$content=$article.next（）；
$content.slideToggle（500，函数（）{
$（此）。设置动画({
高度：'110px'，
});
});
});
文章{
文本对齐：居中；
浮动：左；
保证金：0自动；
宽度：50%；
边缘底部：10px；
}
文章.图标{
宽度：110px；
高度：110px；
显示：块；
左边距：自动；
右边距：自动；
边缘底部：5px；
边界半径：10px；
}
.内容{
显示：无；
宽度：100%；
对齐项目：居中；
证明内容：中心；
填充：0 20px 0 20px；
}

测试
这对我来说没有任何作用，除了模型的作用。这对我来说没有任何作用，除了模型的作用。这对我来说没有任何作用，除了模型的作用

测试
这对我来说没有任何作用，除了模型的作用。这对我来说没有任何作用，除了模型的作用。这对我来说没有任何作用，除了模型的作用

测试
这对我来说没有任何作用，除了模型的作用。这对我来说没有任何作用，除了模型的作用。这对我来说没有任何作用，除了模型的作用

测试
这对我来说没有任何作用，除了模型的作用。这对我来说没有任何作用，除了模型的作用。这对我来说没有任何作用，除了模型的作用

这是一种方法。
我制作了我添加和删除的内容

当您显示文本时，必须有一个显示文本的位置。这个解决方案只是扩展了行。还有另一个解决方案（我更喜欢）是在图片下面展开一个div，它刚好与行重叠。但这取决于你：）


$（“.icon”）。单击（函数（）{
$（this.attr（'id'，'full_size'）；
$article=$（本）；
$content=$article.next（）；
$content.slideToggle（500，函数（）{
$（此）。设置动画({
高度：'110px'，
});
});
});
.container{
显示器：flex；
柔性包装：包装；
}
文章{
弹性收缩：0；/*已添加*/
文本对齐：居中；/*已添加*/
/*保证金：0自动*/
宽度：49%；
边缘底部：10px；
边框：1px纯红；
}
文章.图标{
宽度：110px；
高度：110px；
显示：块；
左边距：自动；
右边距：自动；
/*边缘底部：5px*/
垫底：5px；
/*增加*/
边界半径：10px；
}
.内容{
背景色：#FFF；/*已添加*/
显示：无；
边框：1px黑色虚线；
宽度：50%；
/*对齐项目：居中*/
/*证明内容：中心*/
}

测试
一些文本

测试
一些文本

测试
一些文本

我稍微修改了您的代码片段（将php循环替换为实际的“虚拟”内容），这样它就不会抛出语法错误。请随意调整或还原我的编辑。