jQuery复习—用动画和特效装扮页面(队列未整理)

用动画和特效装扮页面

一、显示和隐藏元素

设置元素的style.display属性(none/block/inline)

1、简单的改变元素显示和隐藏

(1)、显示 show()

(2)、隐藏 hide()

(3)、切换状态 toggle()

2、渐变的显示和隐藏元素

(1)、显示 show(speed,callback)

(2)、隐藏 hide(speed,callback)

(3)、切换状态 toggle(speed,callback)

参数说明:

speed: 数字或者字符串。可以是若干毫秒,也可以是slow、normal、fast

callback: 当动画结束时调用。将函数上下文(this)设置为当前执行动画元素。

二、使元素淡入和淡出

1、fadeIn(speed, callback)

将元素的不透明度提高到其初始值来时所有匹配的元素显示出来

2、fadeOut(speed, callback)

通过将元素的不透明度降级到0%,然后从显示器上删除该元素

3、fadeTo(speed, opacity, callback)

逐渐改变元素的不透明度,从它们当前的值到opacity指定的值

opacity: 将要调整的元素的目标不透明度,指定的取值范围是0.0-1.0

三、上下滑动元素

1、slideDown(speed, callback)

通过组建增加元素的垂直尺寸来使所有匹配的隐藏元素系那是出来,只有隐藏元素有影响

2、slideUp(speed, callback)

通过逐级减少元素的垂直尺寸来从显示器上删除匹配的显示元素

3、slideToggle(speed, callback)

在任何隐藏的包装元素上执行slideDown(),同时在任何显示的包装元素上执行slideUp()

四、停止动画

stop(clearQueue, goToEnd)

停止所匹配元素集合上正在进行的所有动画

五、自定义动画

animate(properties, duration ,easing, callback)

animate(properties, options)

将properties和easing参数指定的动画应用到包装集中的所有成员上。可以指定一个回调函数,在动画完成时调用。

参数:
properties: 对象,指定动画结束时所支持的css样式应该达到的值。通过调整元素的样式属性的当前值到散列对象中指定的值来产生动画(指定的目标值可以是绝对值也可以是相对于起点的值。为了指定相对值,要为目标值添加+=或者-=,分别代表正方向和负方向的相对目标。除了指定目标属性的值,也可以指定下列字符串之一:hide\show\toggle)

duration: 指定特效持续时间

easing: 指定动画滑动特效。核心jQuery提供了两个缓动函数,分别为linear和swing

常见的动画样式属性包括:top、left、width、height和opacity

$(‘.animateMe‘).each(function(){
	$(this).animate({
		width: $(this).width()*2,
		height: $(this).height()*2

	},2000)
})

  

时间: 2024-10-13 06:58:01

jQuery复习—用动画和特效装扮页面(队列未整理)的相关文章

jQuery理解之动画与特效(一)

本节主要降级和学习jQuery的自动显隐,渐入渐出.飞入飞出.自定义动画等. 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏. <script type="text/javascript"> $(function() { $("input:first").click(function() { $("p").hide(); //隐藏 }); $("in

15款fullpage.js鼠标滚动页面动画展示特效

jquery全屏鼠标滚动切换fullpage页面模板下载 html5响应式页面滚动背景图片动画特效 酷炫html5 css3全屏滚动动画专题模板 html5腾讯互动娱乐网站鼠标滚动展示模板 html5平安儿童手表页面滚动简约单页模板 html5叮咚手机app下载页面滚动展示特效 jquery fullPage证券股票软件页面滚屏动画特效 jquery.fullpage.js360安全路由全屏页面滚动效果 html5新年快乐医院专题页介绍模板下载 html5雷锋wifi软件介绍页面下滑滚动式特效

jquery html5图表动画圆形饼图特效

上图: html和jquery实现的饼图特效,效果特好 使用方法: 引入脚本和css <link href="css/style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script src="

JQuery之动画与特效

学编程吧JQuery之动画与特效发布了,欢迎通过xuebiancheng8.com 显示与隐藏 show(spped,[callback])与hide(spped,[callback]) speed可选填slow.normal.fast,对应的速度分别为600ms.400ms.200ms.也可以直接填毫秒数,callback函数为回调函数,动作完成后调用此函数 [javascript] view plaincopyprint? $("img").show(3000,function()

jQuery+CSS3过渡动画模态窗口特效

在线预览   源码下载 jQuery+CSS3过渡动画模态窗口特效是一款基于Codrops的ModalWindowEffects来制作,通过jQuery插件的方式来统一管理各种打开模态窗口的效果.适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器. 加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

基于jQuery点击加载动画按钮特效

分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <p> <button c

jQuery动画与特效

参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQuery实现点击式选项卡jQuery实现select三级联动 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 4

jQuery碎语(3) 动画特效

5.动画特效 ● 自制折叠内容块 内容块如下 <div class="module"> <div class="caption"> <span>标题</span> <img src="rollup.gif" alt="rollup" title="rolls up this module"/> </div> <div class=

jQuery入门基础(四):动画和特效

//显示和隐藏 hide()的语法形式:$(selector).hide(speed,callback);//speed:“fast”;"slow":毫秒数————callback_在显示/隐藏之后的事件 show()的语法形式:$(selector).show(speed,callback); $(function (){ $("#hide").click(function(){ $("div").hide(1000); }) $("