代码之家 › 专栏 › 技术社区 › Phillip Senn mpgn

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

jquery-animate jquery

Phillip Senn mpgn · 技术社区 · 6 年前

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%?

1 回复 | 直到 6 年前

Rory McCrossan Hsm Sharique Hasan 6 年前

如果只有一个维度 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">

推荐文章

G. Ball. · 无法淡出数组中的特定元素

7 年前

Dahnteyy · jquery scrollTop动画功能不工作

7 年前

dihakz · 如何让jQuery从最后一个位置设置动画到新位置?

7 年前

Jimmy · jquery addclass之后的css转换

7 年前

Referee Andy · 延迟后添加的淡入/淡出div

7 年前

user2587454 · 使用动画从下至上展开div

7 年前

Jasbir · 动画编号需要在60秒内停止

7 年前

John Holliday · 自动滚动(aos)不在Wordpress中加载

7 年前

da_root · 动画JSON值的计数并替换null

7 年前

yl2201 · Jquery动画未在指定为%

7 年前