先来张图：
来一张效果图，其他就不一一展示了，代码都在下面：
代码如下：
ht ML > <html lang="en"> <head> < ;m eta charset="UTF-8"> <t IT le>下午练习title> <script ty PE ="application/javascript" src=" jq uery.1.12.4.js">script> <script> $(function () { $(" # a").click(function () { $(" img ").fad ei n(2000,function () { alert("图片淡入了") }); }) $("#b").click(function () { $("img").fadeOut(2000,function () { alert("图片淡出了") }) }) $("#c").click(function () { $("img").slideUp(3000,function () { alert("图片收起来了，隐藏") }) }) $("#d").click(function () { $("img").slideDown(3000,function () { alert("图片放下来了，显示") }) }) $("#e").click(function () { $("img").slideToggle(3000,function () { alert("显示/隐藏切换了") }) }) $("#f").click(function () { $("img").fadeToggle(3000,function () { alert("淡出淡入切换") }) }) $("#g").click(function () { $("img").ani MATE ({ width:"120px", /*图片的 宽 和高*/ height:"160px", opacity:0.5 /*透明度*/ },1000,function () { alert("动画结束了") }) }) $("#q").click(function () { $("img").hide(2000,function () { alert("图片隐藏了") }); /*图片显示、隐藏的效果 和 淡入，淡出的效果不一样*/ }) $("#w").click(function () { $("img").show(2000,function () { alert("图片显示了") }) }) }) script> head> <body> <button id="a">淡入button> <button id="b">淡出button> <button id="c">更改大小隐藏button> <button id="d">更改大小显示button> <button id="e">更改大小显示隐藏切换button> <button id="f">淡出淡入切换button> <button id="g">自定义动画button> <button id="q">隐藏button> <button id="w">显示button> < center > <img src="a1. jpg " height="339" width="510"/> center> body> html> === == ============================================================================================
左右移动效果图：
代码如下：
html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右移动title> <script type="application/javascript" src="jquery.1.12.4.js">script> <script> /*实现左右移动的效果*/ $(function () { $("#a").click(function () { $("p").animate({left:'+50px'},"slow") }) $("#b").click(function () { $("p").animate({left:'-50px'},"slow") }) }) script> head> <body> <center> <button id="a">左移button> <button id="b">右移button> <p style="position: absolute;width:100px;">这是我的pp> center> body> html> 先来张图：
来一张效果图，其他就不一一展示了，代码都在下面：
代码如下：
html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下午练习title> <script type="application/javascript" src="jquery.1.12.4.js">script> <script> $(function () { $("#a").click(function () { $("img").fadeIn(2000,function () { alert("图片淡入了") }); }) $("#b").click(function () { $("img").fadeOut(2000,function () { alert("图片淡出了") }) }) $("#c").click(function () { $("img").slideUp(3000,function () { alert("图片收起来了，隐藏") }) }) $("#d").click(function () { $("img").slideDown(3000,function () { alert("图片放下来了，显示") }) }) $("#e").click(function () { $("img").slideToggle(3000,function () { alert("显示/隐藏切换了") }) }) $("#f").click(function () { $("img").fadeToggle(3000,function () { alert("淡出淡入切换") }) }) $("#g").click(function () { $("img").animate({ width:"120px", /*图片的宽和高*/ height:"160px", opacity:0.5 /*透明度*/ },1000,function () { alert("动画结束了") }) }) $("#q").click(function () { $("img").hide(2000,function () { alert("图片隐藏了") }); /*图片显示、隐藏的效果 和 淡入，淡出的效果不一样*/ }) $("#w").click(function () { $("img").show(2000,function () { alert("图片显示了") }) }) }) script> head> <body> <button id="a">淡入button> <button id="b">淡出button> <button id="c">更改大小隐藏button> <button id="d">更改大小显示button> <button id="e">更改大小显示隐藏切换button> <button id="f">淡出淡入切换button> <button id="g">自定义动画button> <button id="q">隐藏button> <button id="w">显示button> <center> <img src="a1.jpg" height="339" width="510"/> center> body> html> =================================================================================================
左右移动效果图：
代码如下：
html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右移动title> <script type="application/javascript" src="jquery.1.12.4.js">script> <script> /*实现左右移动的效果*/ $(function () { $("#a").click(function () { $("p").animate({left:'+50px'},"slow") }) $("#b").click(function () { $("p").animate({left:'-50px'},"slow") }) }) script> head> <body> <center> <button id="a">左移button> <button id="b">右移button> <p style="position: absolute;width:100px;">这是我的pp> center> body> html> 觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5图片的淡出，淡入，显示，隐藏，外加左右移动动画效果 全部内容，希望文章能够帮你解决 html5教程-HTML5图片的淡出，淡入，显示，隐藏，外加左右移动动画效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5图片的淡出，淡入，显示，隐藏，外加左右移动动画效果的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219341