动画隐藏显示

最新推荐文章于 2024-03-10 18:19:17 发布

原创最新推荐文章于 2024-03-10 18:19:17 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #动画 #开发语言

这篇博客介绍了如何使用JavaScript来实现图片的动画隐藏和显示效果。通过在HTML中添加按钮和图片，然后利用CSS设置样式，再结合jQuery库，为按钮注册点击事件，实现从最后一张图片开始依次隐藏或从第一张图片开始显示的动画效果。

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

首先在body标签里面给他一个input标签，里面type=”button” value="隐藏动画" id="btn1",在复制一个把隐藏动画改成显示动画，在把id名改成btn2，然后一个div在div里面给一个img标签在把图片倒入进去，倒入4张图片

2.在tilte标签给一个style标签里面div宽为400像素，img宽高为90像素，在style下面给一个script标签倒入一个插件

3.在script下面在给一个script标签，页面加载$(function(){}，然后点击第一个按钮，隐藏，找到第一个按钮的id然后给他注册点击事件 $("#btn1").click(function(){}，我们要img隐藏，隐藏的时候我们是从最后隐藏的，我们要选择最后一个last是最后的意思，找到他之后就有注册隐藏的函数一个隐藏动画hide，那么时间300，动画完成之后，当前的这个prev找到他前面一个函数在点hide隐藏，$("#btn1").click(function(){$("div>img:last").hide(300,function f1(){$(this).prev().hide(300,f1);})})，就完成隐藏效果了

4.点击第二个按钮，显示的时候是第一个开始显示的，过滤first，show是显示，一个时间300，function有名字的函数，找到他下一个next()的意思， $("#btn2").click(function(){$("div>img:first").show(300,functionf1(){$(this).next().show(300,f1);})})})写完我们就完成了显示的效果