jQuery学习笔记之（一）动画与特效

前端开发作者： 2024-08-25 18:45:01

本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。1.显示和隐藏hide()和show()对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍jQuery的显示和隐藏。

<script type="text/javascript">
            $(function() {
                $("input:first).click(() {
                    $(p).hide(); //隐藏
                });
                $(input:last).show(); 显示
                });
            });
        </script>
        input ="button" value="Hide"="Show"p>点击按钮，看看效果div><em>本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对动画来讲，显示和隐藏是最基本的效果之1，本节简单介绍jQuery的显示和隐藏。>

show(duration,[callback]);
hide(duration,[callback]);

).hide(300); ).show(500 例子和第1个例子相同，只是对hide()和show()增加了时间参数。其实toogle()也能够加入事件参数。
对动画效果显隐，jQuery还提供了fadeIn()个fadeOut这两个实用的方法，他们的动画效果类似退色，语法与slow()和hide()完全相同。

            fadeIn(duration,[callback]);
            fadeOut(duration,sans-serif">
例子
input:eq(0)img).fadeOut(3000逐步fadeOut
input:eq(1)).fadeIn(1000逐步fadeIn
                });
            });

        >

        img src="http://study.ahthw.com/gtimg/book/2014/11/201411120129479688.jpg"
fadeTo()方法的使用。

);
                });
                $(input:eq(2)).fadeTo(,0.5input:eq(3)0);
                });
            });
        >="03.jpg"></>="FadeOut"="FadeIn"="FadeTo 0.5"="FadeTo 0"
fadeOut相干参数

speed

毫秒 （比如 1500）
"slow"
"normal"
"fast"

opacity

必须。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。

callback

div).add().slideUp().slideDown(>="SlideUp">="SlideDown"br="04.jpg"
前面提到了几种动画效果，jQuery还提供了slideUp()和slideDown()来摹拟PPT中的类似幻灯片拉帘效果，它与slow()和hide()完全相同。

animate(params,[duration],[easing],[callback])
style>
            div {
                background-color: #FFFF00;
                height 40px
                width 80px
                border 1px solid #000000
                margin-top 5px
                padding
                text-align center;
            }
        button#block).animate({
                        opacity: 80%100px5px30px40px20px
                    },245); line-height:1.5!important">2000);
                });

            });
        button id="go">Go>>buttondiv ="block">动画！
在params中，jQuery还可以用“+=”或"-="来表示相对变化。如

                position absolutebutton:first).animate({
                        left: -=80px" 相对左移
                    },245); line-height:1.5!important">button:last+=80px相对右移
button 八叔技术之家为你收集整理的jQuery学习笔记之（一）动画与特效全部内容，希望文章能够帮你解决jQuery学习笔记之（一）动画与特效所遇到的程序开发问题。

上一篇：表头列头固定页面下一篇：关于wcf 的连接超时问题
		
猜你在找的HTML相关文章

· Html 基础 二12-12

· Html 基础 一12-12

· Html 基础 三12-12

· button与input[type=”button”]的区别11-16

· 弹出层layer的使用11-16

· HTML5表单验证（4个实用的表单美化案例）11-07

· HTML概念、语法及常用基础标签11-07

· HTML5存储（带一个粗糙的打怪小游戏案例）11-07

· HTML表单概念、语法及创建表单，案例11-07

· HTML5视频（自定义视频播放器源码）11-07

· HTML5音频（自定义mp3播放器源码）11-07

· HTML5 canvas绘图基础（电子名片生成器源码）11-07
八叔技术之家官方公众号

全站导航更多

PHPJavaPythonC#C&C++RubyHTMLHTML5JavaScriptCSSjQueryBootstrapiOSAndroidSwiftHybridCocos2d-xFlutterGitSVNJenkinsSSHJmetersysTemd算法设计模式正则表达式ElasticsearchFlinkHadoop比特币大数据KafkaSparkwordpressDedecmsphpcmsDiscuz帝国CMSLinuxWindowsCentOSUbuntuNginxWebService
最新HTML教程
· Html 基础 二
· Html 基础 一
· Html 基础 三
· button与input[type=”button”
· 弹出层layer的使用
· [JavaScript] 10.JS 表单操作
· 粗浅看 XML
· JavaScript高级程序设计（读书
· css3中的部分属性
· JavaScript学习--Item29 DOM基

热门HTML教程
· Html 基础 二
· Html 基础 一
· Html 基础 三
· button与input[type=”button”
· 弹出层layer的使用
· HTML5表单验证（4个实用的表单
· HTML概念、语法及常用基础标签
· HTML5存储（带一个粗糙的打怪小
· HTML表单概念、语法及创建表单
· HTML5视频（自定义视频播放器源
· HTML5音频（自定义mp3播放器源
· HTML5 canvas绘图基础（电子名
其他相关热搜词更多

CSSHTMLNode.jsangularJScocosvue.jsrailsJsHTML5bashspringreactjsreactHibernateangularCSS3实现脚本依赖Luabootstrapjspselenium问题解析webAPIxcode库xml参数返回tablefilehttptypescriptforms控件xmlclass

                最近更新

· Levenshtein Distance（编辑距离）算法与使用场...12-14

· 阿里出品Excel工具EasyExcel使用小结12-14

· 项目架构级别规约框架Archunit调研12-14

· 聊聊Java内省Introspector12-14

· 基于Quartz编写一个可复用的分布式调度任务管理...12-14

· Java并发编程-扩展可回调的Future12-14

· 硬核干货：4W字从源码上分析JUC线程池ThreadPoo...12-14

· JSR310新日期API(完结篇)-生产实战12-14

· ThreadLocal源码分析-黄金分割数的使用12-14

· Java线程生命周期与状态切换12-14

                热门文章

· Levenshtein Distance（编辑距离）算法与使用场...12-14

· 阿里出品Excel工具EasyExcel使用小结12-14

· 项目架构级别规约框架Archunit调研12-14

· 聊聊Java内省Introspector12-14

· 基于Quartz编写一个可复用的分布式调度任务管理...12-14

· Java并发编程-扩展可回调的Future12-14

· 硬核干货：4W字从源码上分析JUC线程池ThreadPoo...12-14

· JSR310新日期API(完结篇)-生产实战12-14

· ThreadLocal源码分析-黄金分割数的使用12-14

· Java线程生命周期与状态切换12-14

                好站推荐
 菜鸟教程

 前端之家

商务合作
                
            Copyright © 2019 八叔技术之家. 当前版本 V7.0.16

            八叔技术之家 版权所有 
            闽ICP备13020303号-8

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

jQuery学习笔记之（一）动画与特效

猜你喜欢

相关新闻

推荐模板

推荐精华

热门标签

speed	毫秒（比如 1500） "slow" "normal" "fast"
opacity	必须。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback