Перевернуть карту горизонтально (удерживая высоту на уровне 100%)

Question

National Geographic имеет эту отличную маленькую игру на JavaScript , которая включает в себя звук и анимацию. Просматривая исходный код, я подумал, что они переворачивают карту, выполняя animate {width:0%} с последующим animate {width:100%}, но моя анимация выглядит иначе, чем у них:

$(document).on('click','img',clicked)

function clicked() {
  $(this).animate({width:'0%'})
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images.nationalgeographic.com/wpf/media-content/richmedia/0/629/project/memory/images/card_back_hard.png">

В: Как вы заставляете карту переворачиваться горизонтально, а не уменьшаться до 0%?

Answer 1

Если указано только одно измерение img, то значение применяется ко всем измерениям для поддержания соотношения сторон.

Если вы хотите сохранить height, установите его начальное значение.

$(document).on('click', 'img', clicked)

function clicked() {
  $(this).animate({
    width: '0%',
    height: $(this).height()
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images.nationalgeographic.com/wpf/media-content/richmedia/0/629/project/memory/images/card_back_hard.png">