0

我在一个容器 div ( "screenshots-container") 中有 3 个 div，它们显示 imgs。我单击 div ( "individual-screenshot") 中的 img ，它会为img.

  • 当我单击另一个 div 中的 img 时，我无法让它反转第一个 img 上的动画。

到目前为止我所做的工作：

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

如果我单击另一个img，在另一个div中，前一个div的类名恢复为"individual-screenshot"，新单击div的类名更新为"individual-screenshot current-screenshot"，新单击的img动画大小和位置相应地-最初单击div的类名img不会恢复为原始位置和大小。

有以下问题：

首先单击的imgindiv不会动画回其原始位置。

HTML

<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>

CoffeeScript（使用 jQuery）：

showScreenShot: (e) ->
    e.preventDefault()
    $imgClicked = $(e.currentTarget)
    console.log "$imgClicked:", $imgClicked
    $div =  $($imgClicked[0].parentElement.parentNode) # img's parent div (individual-screenshot)

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

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

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

    if $div.hasClass("current-screenshot")
        console.log "$div: ", $div
        $screenshot = $($div[0].childNodes[0].children)                                
        $screenshot.animate
            "height": "200px"
            "width": "200px"
            "marginLeft": "280px"
        .css
            "position": "relative"

    else
        # not sure how to proceed. How can I get a reference to the originally clicked div, so that I can reverse its animation back to where it was?
4

1 回答 1

0

到目前为止，一种hacky hackish方式：

动画 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"
于 2013-10-24T20:03:06.880 回答