Question

我在容器div（"screenshots-container"）中有3个div，显示imgs。我点击div中的img（"individual-screenshot"），它会为img设置动画。

我不能让它在第一个img上反转动画，当我点击另一个div中的img。

到目前为止我的工作：

如果我点击img，它会将其容器类名称从"individual-screenshot"更新为"individual-screenshot current-screenshot"。然后它会动画img的大小和位置。

如果我点击另一个img，则在另一个div中，之前的div的班级名称将恢复为"individual-screenshot"，并且新点击的div }的班级名称更新为"individual-screenshot current-screenshot"，新点击的img会相应地设置动画大小和位置 - 最初点击的div的{{1}}不会恢复到原来的位置和大小。

遇到问题：

首先点击的img中的img无法动画回原始位置。

HTML

div

CoffeeScript（使用jQuery）：

<div class="screenshots-container">
    <div class="individual-screenshot current-screenshot">
      <a href="#"><img src="assets/test-icon.png" style="display: inline-block; height: 200px; width: 200px; margin-left: 280px; position: relative;"></a>
    </div>
    <div class="individual-screenshot">
      <a href="#"><img src="assets/party.png"></a>
    </div>
    <div class="individual-screenshot">
      <a href="#"><img src="assets/test-icon.png"></a>
    </div>
  </div>
</div>

Answer 1

到目前为止，一种可恶的hackak方式：

动画div（paddingLeft和css位置）而不是现在包含的img。还远非完美，特别是因为我无法干净地引用之前选择的元素。

showScreenShot: (e) ->
    e.preventDefault()
    $imgClicked = $(e.currentTarget)
    console.log "$imgClicked:", $imgClicked
    $div =  $($imgClicked[0].parentElement.parentNode)


    $screenshotsContainer = $(".screenshots-container")
    $screenshotsList = $screenshotsContainer[0].childNodes

    $otherScreenshots = $($screenshotsContainer[0].childNodes).not($div)
    console.log "$otherScreenshots: ", $otherScreenshots

    # Removes "current-screenshot" as class for all in array
    $.each $screenshotsList, (index, value) ->
        # changes class name of div
        $value = $(value).removeClass("current-screenshot")


    $div.toggleClass("current-screenshot")
    if $div.hasClass("current-screenshot")
        console.log "$div: ", $div
        $div.animate
            "height": "200px"
            "width": "200px"
            "paddingLeft": "280px"
        .css
            "position": "absolute"
            "top": "0"

        $.each $otherScreenshots, (index, value) ->
            $(value).animate
                "height": "100px"
                "width": "100px"
                "paddingLeft": "0"
                "marginTop": "25px"
            .css
                "position" : "relative"
                "marginTop":" 5px"

如何获取对单击的旧元素的引用，以便可以运行反向动画？

1 个答案: