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％）

1 个答案: