水平翻转卡片（保持高度为 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">

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

Flipping a card horizontally (keeping the height at 100%)

jquery

jquery-animate