0

コンテナー div ( "screenshots-container") 内に 3 つの div があり、imgs を表示します。div ( "individual-screenshot") 内の img をクリックすると、img.

  • 別のdivの画像をクリックすると、最初の画像のアニメーションを逆にすることができません。

私がこれまで取り組んできたこと：

をクリックするとimg、コンテナ クラス名が から"individual-screenshot"に更新され"individual-screenshot current-screenshot"ます。次に、img のサイズと位置をアニメーション化します。

img別の をクリックするdivと、前divの のクラス名が に戻り"individual-screenshot"、新しくクリックさdivれた のクラス名が に更新され、それに応じ"individual-screenshot current-screenshot"て新しくクリックされたimgサイズと位置がアニメーション化されます。最初にクリックされたものは元divのimg状態に戻りません元の位置とサイズ。

次のような問題があります:

最初にクリックされたimg内divの は、アニメーション化されて元の位置に戻りません。

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

これまでのところ、ハッキーなハックな方法：

現在含まれている img の代わりに、div (paddingLeft と css の位置) をアニメーション化します。特に以前に選択した要素をきれいに参照できないため、まだ完全にはほど遠い.

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 に答える