水平翻转卡片（保持高度100％）

Question

国家地理有这个great little JavaScript game，包括声音和动画。在查看源代码时，我认为他们通过做一个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">