Question

我希望能够在用户点击时为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>

有人可以帮我吗？

Answer 1

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

1）忽略此问题

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

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

所有这些都不理想。

将图像缩略图设置为父div并将src更改为更大的图像

1 个答案: