试图用jquery平滑地移动div

Question

所以我有一个foreach循环，它引入了4个带有外部图像的div(在片段中用"dummy"内容替换以获得一个工作示例(，当我点击图像时，"隐藏"内容应该会出现。我想不出的问题是如何平稳地将div转换到侧面。例如，如果我点击左上角，左下角就会跳到右下角，如果我将其向后切换，所有东西都会跳回来，而不是平稳过渡。

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

$(".icon").click(function() {
$(this).attr('id', 'full_size');
$article = $(this);
$content = $article.next();
$content.slideToggle(500, function() {
$(this).animate({
height: '110px',
});
});
});

article {
text-align: center;
float: left;
margin: 0 auto;
width: 50%;
margin-bottom: 10px;
}
article .icon {
width: 110px;
height: 110px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
border-radius: 10px;
}
.content {
display: none;
width: 100%;
align-items: center;
justify-content: center;
padding: 0 20px 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<article class="article">
<h3>test</h3>
<img src="..." alt="icon" class="icon">
<div class="content">
<p> This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes.</p>
</div>
</article>
<article class="article">
<h3>test</h3>
<img src="..." alt="icon" class="icon">
<div class="content">
<p> This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes.</p>
</div>
</article>
<article class="article">
<h3>test</h3>
<img src="..." alt="icon" class="icon">
<div class="content">
<p> This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes.</p>
</div>
</article>
<article class="article">
<h3>test</h3>
<img src="..." alt="icon" class="icon">
<div class="content">
<p> This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes.</p>
</div>
</article>
</div>

Answer 1

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

当你显示一个文本时，必须有一个地方可以显示它。这个解决方案只是扩展行。还有另一种解决方案(我更喜欢(是在图片下面展开一个div，它刚好与行重叠。但这取决于你：(

$(".icon").click(function() {
$(this).attr('id', 'full_size');
$article = $(this);
$content = $article.next();
$content.slideToggle(500, function() {
$(this).animate({
height: '110px',
});
});
});

.container {
display: flex;
flex-wrap: wrap;
}
article {
flex-shrink: 0; /* added */
text-align: center; /* added */
/* margin: 0 auto; */
width: 49%;
margin-bottom: 10px;
border: 1px solid red;
}
article .icon {
width: 110px;
height: 110px;
display: block;
margin-left: auto;
margin-right: auto;
/* margin-bottom: 5px; */
padding-bottom: 5px;
/* added */
border-radius: 10px;
}
.content {
background-color: #FFF; /* added */
display: none;
border: 1px dashed black;
width: 50%;
/* align-items: center; */
/* justify-content: center; */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<article class="article">
<h3>test</h3>
<img src="https://via.placeholder.com/50x50" alt="" class="icon">
<div class="content">
<p>Some Text</p>
</div>
</article>
<article class="article">
<h3>test</h3>
<img src="https://via.placeholder.com/50x50" alt="" class="icon">
<div class="content">
<p>Some Text</p>
</div>
</article>

<article class="article">
<h3>test</h3>
<img src="https://via.placeholder.com/50x50" alt="" class="icon">
<div class="content">
<p>Some Text</p>
</div>
</article>
</div>