Question

所以我有这个foreach循环，它带有一个外部图像4个div（由片段中的“ dummy”内容代替以获得一个有效的示例），当我单击图像时，“ hidden”内容应出现。我不知道的问题是如何将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。但这取决于您：）

data.frame(A=c(1,2,3),B=c(4,5,6),C=c(7,8,9))

$(".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; */
}

试图用jQuery平稳地移动div

1 个答案: