jQuery 王者荣耀手风琴（折叠卡片）案例

最新推荐文章于 2022-10-22 20:56:57 发布

英俊男孩

最新推荐文章于 2022-10-22 20:56:57 发布

阅读量1.4w

点赞数 2

文章标签： javascript css3

本文链接：https://blog.youkuaiyun.com/qq_44829011/article/details/106262626

版权

该博客介绍了如何使用jQuery创建一种类似王者荣耀的手风琴（折叠卡片）效果，当鼠标悬停在小图上时，小图淡出，对应的大图淡入。实现过程中，通过改变不同类名控制四张小图和大图的显示状态，利用animate确保图片长度不变，并通过stop()方法避免效果叠加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：鼠标经过相应图片会展开大图小图淡出大图淡入效果
在这里插入图片描述首先四张小图实现四张大图隐藏（不同的class）
随着hover事件小图淡出fadeout 大图淡入fadein
animate保证淡入淡出的过程this指向的图片的长度不变
最后需在效果前加上stop（）取消效果的排队

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="Jq.js">
</script>
<script>
$(document).ready(function(){
   
//	$('a').find('img').hide();

  $('li').hover(function(){
   
  	
		$(this).find('.s1').animate({
   width:80}).stop

最低0.47元/天解锁文章