将图像缩略图动画到父 div 并将 src 更改为更大的图像答案

【问题标题】：Animating image thumbnail to parent div and changing src to bigger image将图像缩略图动画到父 div 并将 src 更改为更大的图像
【发布时间】：2018-07-16 21:29:19
【问题描述】：

我希望能够在用户单击时为 div 设置动画，并让该 div 扩展以适应父 div 的大小。我还希望图像 src 在动画时发生变化。

我已经设法为它制作动画，但我似乎无法让它改变图像 src。

这是我目前所拥有的：

$('figure').click(function(event) {
  event.preventDefault();
  // Get square ID
  var currentId = $(this).attr('id'),
    extraimg = $('#' + currentId).clone(),
    currentOffset = $('#' + currentId).offset(),
    parent = $('.wrapper'),
    parentOffset = parent.offset(),
    bigImageSrc = $(this).children("a").attr("src");
  extraimg.find("img")
    .attr("src", bigImageSrc)
    .css({
      'position': 'absolute',
      'top': currentOffset.top,
      'left': currentOffset.left,
      'margin': 0
    })
    .appendTo(parent)
    //make bigger
    .animate({
      'height': parent.height(),
      'width': parent.width(),
      'top': parentOffset.top,
      'left': parentOffset.left
    }, 1500)
    .on('click', function() {
      $(this).stop(true).remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="photo-1" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class=" scene_element scene_element--fadein">
  <a href="http://localhost:8888/wp-content/uploads/2018/01/golden-horizon-sunset.jpg" itemprop="contentUrl" data-size="2304x1536'">

    <img width="576" height="384" src="http://localhost:8888/wp-content/uploads/2018/01/golden-horizon-sunset-576x384.jpg" class="attachment-image-md size-image-md wp-post-image" alt="" srcset="http://localhost:8888/wp-content/uploads/2018/01/golden-horizon-sunset-576x384.jpg 576w, http://localhost:8888/wp-content/uploads/2018/01/golden-horizon-sunset-300x200.jpg 300w, http://localhost:8888/wp-content/uploads/2018/01/golden-horizon-sunset-768x512.jpg 768w, http://localhost:8888/wp-content/uploads/2018/01/golden-horizon-sunset-1024x683.jpg 1024w, http://localhost:8888/wp-content/uploads/2018/01/golden-horizon-sunset-1152x768.jpg 1152w"
      sizes="(max-width: 576px) 100vw, 576px" />
  </a>
  <figcaption itemprop="caption description">
    The Golden Horizon </figcaption>
</figure>

谁能帮帮我？

【问题讨论】：

标签： jquery html css animation

【解决方案1】：

图像 src 不能动画。但是您可以在动画前用大图像更改小图像，然后为新图像设置动画大小。但这会给你带来新的问题：新图像不会立即加载，所以你可以：

1) 忽略这个问题

2) 总是预加载重要的大图像（但这是非常糟糕的做法）

3) 仅在完全加载后才在大版本上更改图像（更多时间编写代码）。

所有这些都不理想。

【讨论】：