MICUU
微资讯
声卡
创新2024全套教程
5.1声卡全套
创新声卡驱动
板载声卡调试全套教程
Sam机架安装
Sam机架
音效助手
专题
文档
技术文档汇总
站内文档
更多
软件
更新日志
关于
装机必备
Gramos模板
光年后台模板
Betube模板
美图
友情链接
站内导航
关于
搜索
退出登录
登录
原创
jquery append后并添加动画
2021-09-26
48.8w热度
网站动态页面,用户点击图片会显示image viewer效果,但是直接append太生硬,想添加一点动画。曾尝试过animate.css,但是在pc端没有效果,现在想用jquery来实现,代码主要是27/28行。 ``` var sw_head = ` <div class="micuer_colse" onclick="closeSwiper()"> <img src="" alt=""> </div> <div class="swiper-container none"> <div class="swiper-wrapper">`; var sw_foot = ` </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>`; var data = e.data; var item_html = ''; data.forEach(function (item){ item_html += `<div class="swiper-slide"> <img src="${item}" alt=""> </div>`; }) var html = sw_head + item_html + sw_foot; console.log(html) $("#micuer_sw").append(html); $(".swiper-container").fadeIn(300) ``` 直接这样是没有效果的,因为执行动画需要**从无到有**,而我也一直以为DOM添加的节点本来就是从无到有,实际上却是 该DOM节点设置为display: none然后变为 block,这才是真正的从无到有,所以接着就迎刃而解了 注意上方第五行,添加了none属性 ``` .none{ display: none; } ``` [![](https://micuu.com/data/upload/20210926/614fe008591dd.png)](https://micuu.com/data/upload/20210926/614fe008591dd.png)
注:原创不易,转载请注明出处(
https://micuu.com/new/2134.html
),本站所有资源来源于网络收集,如有侵权请联系QQ245557979进行清除。
最后修改与 2022-02-22
上一篇:
红色白丝袜黑丝诱惑987456
下一篇:
阁楼美少女,网络美女,二次元收集
留言反馈
请先登录
问题反馈渠道,如有软件无法下载或者其他问题可反馈。【由于某种原因,目前留言不展示】
用户需要登录后才能留言反馈
立即留言
珍藏视频
10分钟高效燃脂
30天高效瘦脸操
5分钟缓解颈椎操
友人
微博
全民K歌
唱吧
今日头条
悠悠网
科技小锅盖
彼岸桌面
阮一峰
laravel社区
V2ex
掘金
更多>