Jquery基础篇6___动画效果

最近由于太忙,总是没有时间写东西,不是有句古话说时间似海绵中的水,挤挤总会有的,但感觉当了程序员之后,总是在忙着写代码,忙着学新技术,时间本来就不够,想挤挤时间抽空写点东西,总是挤不出来。忙里偷得半日闲,有时间还是写写比较好。有时候感觉自己写的这些东西不是很多人都有吗,而且Jquery官网上写的要比自己好多了,但是写自己的东西总会有自己的理解,有自己的想法在其中,而且印象也比较深刻。学过Jquery的人,肯定会感觉自己当时候照着例子的时候会,真正要写大型的JS代码的时候,却总写不出来,而且过不了三四个月,基本上都忘记了,说白了还是没有自己的见解,练习的也比较少,缺乏把零散的东西组织起来的能力。所以是记住了忘,忘了又得从新学;到最后的模式就像大学生看书一样,翻开的总是那么几页,学习也会陷入到瓶颈。

废话不多说了,还是直接进入主题,学习Jquery的动画效果。

Jquery的动画效果主要有显示,隐藏,淡入,淡出, 展开,折叠,还可以定义自己的动画效果,动画效果其实就是CSS样式的改变,对于熟练的美工人员,他们写的那个样式比较美,而且布局也相对的合理,像我这种写代码的人对于CSS都感到很烦,更不用说设计出美丽的动画效果了,不过基础的东西还是得介绍介绍,真正到了开发项目的时候,你想写这种东西,估计也没人让你写。怕不美观。接下来一一介绍这些内容

显示,隐藏:

      方法:hide,show,toggle(若是显示则隐藏,若是隐藏则显示)

参数:show(time,function()),这里的time是以毫秒为单位的,指的是隐藏的时间和显示的时间,不过有三个固定的值,‘fast’,‘slow’,‘normal‘。当不传递参数的时候默认是400毫秒,fast是200毫秒,slow是600毫秒。function表示执行完动画效果之后继续执行              该函数

场景:一闪一闪的效果,

    $("#divArea").hide(1000).delay(400).show(1000,function all(){
             $("#divArea").hide(1000).delay(400).show(1000,all);
    });

场景二就是提示信息渐渐退出,就是什么登陆成功了,什么密码错误了,用户名不正确了等等这些东西。这里的delay方法是延迟的意思,hide(1000)这个动画效果执行完之后,等待400毫秒之后,才开始执行show(1000)的动画效果。

  淡入,淡出:

    方法:fadeIn,fadeOut,fadeToggle,fadeTo()

参数:fadeTo(time,Opacity),第一个参数是时间的意思,第二个参数是透明度,这个数值是1到0,按百分比来计算。

场景:开发中用到的场景就是提示消息慢慢淡出。用法跟之前的相似。

 展开,折叠:

方法:slideup(),slidedown(),slideToggle()

参数:slideup(time,function()),这里的参数和之前的相同,所以不在介绍了,自己练习一下立马就看出来效果了。

自定义动画:

    方法:animate(css,time,function)

参数:css表示一段CSS样式,类似于{background:‘red‘,height:400px}。time表示时间,和之前的相同,function也和之前相同,

场景:动画效果实际上就是CSS效果的变化,我们实现一个滑动的效果,每过一段时间,往右边滑动一定的距离。

1     var number =0;
2    $("#divArea").animate({
3        ‘margin-left‘: number+‘px‘
4    },1000,function GoLeft(){
5       number = (number + 100)%screen.availWidth;
6       $("#divArea").animate({‘margin-left‘:number+‘px‘},1000,GoLeft);
7    })

  队列动画:

方法:其实就是在Function函数里继续写上之前的动作。

场景:一个接一个隐藏所有DIV元素。

   $("div").first().hide(‘slow‘,function(){
       $(this).next().hide(‘slow‘,arguments.callee);
   })

停止动画,完成动画:

方法:finish,stop,

参数:stop(clearQueue,goToEnd),这两个值是布尔值,clearQueue意思是清除后续的动作,如果为true时表示只执行该动画,如果为false时表示执行该动画之后还执行后续的动画。goToEnd表示的动画最终的效果,如果为true时,表示调到该动画的最终效果,false的时候会在点击停止的时候即停止。而finish没有任何参数,表示的是直接达到所有动画都执行完之后的效果。

演示效果,请参考:http://www.jquery123.com/finish/

至此基本的动画效果都介绍完毕了,但是要达到那种美化的效果,还是多学学CSS。学完之后自定义动画就可以实现了。

时间: 2024-12-04 04:56:30

Jquery基础篇6___动画效果的相关文章

深入学习jQuery的三种常见动画效果

× 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画是一个大的系列,本文将详细介绍jQuery的三种常见动画效果——显隐效果.高度变化及淡入淡出 显隐 在CSS中,总结过实现元素显隐的9种思路.而jQuery中的show()和hide()方法是通过改变display属性来实现元素显隐效果,它们是jQuery中最基本的动画方法 [hide()] hid

一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content=&

jquery 物品加入购物车动画效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title

大三在校生的传智120天的1200小时.net(十) 关于JQuery(最后一点动画效果*)

1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一个高亮度的(比如普通样式按钮坐标为100,100. 高亮样式按钮坐标为120,120),当鼠标经过,js改变css background-position:100 -100;动态变为120 -120.(至于为什么当你在很多网站要保存一个小图标,却保存成了很大的图片,就是因为网站的图标显示离痛了bac

jQuery基础篇

jQuery的触发事件:1.blur(获得焦点离开后触发)2.focus(获得焦点直接触发)3.change(表单的内容改变,且光标离开后触发)4.click(单击事件)5.dblclick(双击事件)6.error(发生错误后触发事件)7.focusin(检测元素以及其子元素获得焦点的情况,可以在父元素上检测子元素获取焦点的情况)8.focusout(检测元素以及其子元素失去焦点的情况,可以在父元素上检测子元素失去焦点的情况)9.keydown(按键按下未抬起时触发)10.keyup(按键按下

jQuery事件机制,动画效果,工具和其他操作(三)

jQuery事件机制 1 事件操作 1.1 页面载入事件 $(document).ready(function(){ // 在这里写你的代码... }); 或者 $(function($) { // 你可以在这里继续使用$作为别名... }); 1.2 事件绑定 on(eve,[sel],[data],fn) 1.7+ 在选择元素上绑定一个或多个事件的事件处理函数 bind(type,[data],fn) 3.0- 请使用on() one(type,[data],fn) 为每一个匹配元素的特定事

jquery.animateNumber.js 数字动画效果

应要求  ,改个东西,需要的数字动画效果网上搜了,都没有满足要求效果的现成插件,最后找到<a href="http://www.51xuediannao.com/mbdemo.php">jquery.animateNumber.js</a>. 需要的效果如图:: 要求有分割符及小数位,但是<a href="http://www.51xuediannao.com/mbdemo.php">jquery.animateNumber.js

jQuery基础知识--选择器与效果

$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class="test"的元素 $("#test").hide()--隐藏所有id="test"的元素 文档就绪函数 $(document).ready(function() {     ---------jQuery function go here----

[jquery]基础篇--this与$this区别

参考: http://www.cnblogs.com/hannover/p/4109779.html 1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的  $()  这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象.那么,当你在网页中alert($('#id'));时,会