Как получить ссылку на старый элемент, по которому щелкнули, чтобы запустить обратную анимацию?

0

У меня есть 3 div в контейнере div ("screenshots-container"), которые показывают imgs. Я нажимаю img в div ("individual-screenshot"), он оживляет img.

  • Я не могу заставить его изменить анимацию на первый 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 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?
  • 0
    Если вы использовали CSS-переходы, вам не нужно было бы беспокоиться ни о чем, кроме назначения или удаления классов;)
Теги:
coffeescript

1 ответ

0

До сих пор хакерский хакерский подход:

Анимация 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"

Ещё вопросы

Сообщество Overcoder
Наверх
Меню