水平翻转卡片(保持高度为 100%)

Question

国家地理有这个很棒的小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">