上篇博客我们讲过了jquery的基础知识——强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现。

因为动画的效果不能截图为大家展示,大家可以自行实验。

一、显示隐藏

1、jquery中通过hide() 和 show() 方法来隐藏和显示 HTML 元素:

<span style="font-size:18px;">$("#hide").click(function(){
$("p").hide();
}); $("#show").click(function(){
$("p").show();
});
</span>

2、通过toggle() 方法来切换 hide() 和 show() 方法。

<span style="font-size:18px;">$("button").click(function(){
$("p").toggle();
});</span>

二、淡入淡出

fadeIn() 用于淡入已隐藏的元素。

<span style="font-size:18px;">$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});</span>

fadeOut() 方法用于淡出可见元素。

<span style="font-size:18px;">$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
</span>

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

<span style="font-size:18px;">$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
</span>

三、滑动

滑动和上显示隐藏与淡入淡出的实现方法基本相同 。

方法名

含义

slideDown

用于向下滑动元素

slideUp

用于向上滑动元素

slideToggle

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

如果元素向上滑动,则 slideToggle() 可向下滑动它们。

四、自定义动画

自定义动画可以说既简单又复杂。简单说的是它只需要一个函数,复杂指的是这个函数可以添加n多个属性。

1、语法:

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

例如:

$("button").click(function(){
$("div").animate({left:'250px'});
});

提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。

如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

2、jQuery animate() - 操作多个属性

<span style="font-size:18px;">$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
</span>

3、jQuery animate() - 使用队列功能

<span style="font-size:18px;">$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
</span>

五、动画停止

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

解释:

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

<span style="font-size:18px;">$("#stop").click(function(){
$("#panel").stop();
});</span>

最后:jquery为我们提供的几种动画,实现简单、功能强大,有了jquery,在javascript中非常令人头疼的动画制作变得极为容易,有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手!

强大的JQuery(二)--动画效果的更多相关文章

  1. jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

  2. 第一百七十二节,jQuery,动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...

  3. jquery-12 jquery常用动画效果有哪些

    jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...

  4. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  5. 前端 ----jQuery的动画效果

    03-jQuery动画效果   jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画 方式一: $("div" ...

  6. jQuery基础---动画效果

    内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性  发文不易,转载请注明出处~ 一.显示.隐藏 jQuery 中显示方法 ...

  7. 前端基础-jQuery的动画效果

    阅读目录 隐藏 显示 切换 下拉 上卷 显示 一.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局, ...

  8. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  9. jQuery Easing动画效果扩展(转)

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  10. jQuery的动画效果

    jQuery 是一个 JavaScript 库.jQuery 库可以通过一行简单的标记被添加到网页中. <script type="text/javascript" src= ...

随机推荐

  1. Android之旅 笔记总结(一)

    一.Android入门 1.          Android操作系统的体系结构分为4层,由上而下依次是应用程序.应用程序框架.核心类库(包括Android运行时环境)和Linux内核. 2.     ...

  2. hdu-4753-Fishhead’s Little Game-记忆化搜索

    网赛的一道题目,当时没做出来. 由题意可知,最多只有12条边未知. 所以最多只有(1<<12)种状态. 所以记忆化搜索这种状态下,枚举添加任意一条边之后的状态的最优值. #include& ...

  3. 数据结构——图——最短路径D&F算法

    一.Dijkstra算法(贪心地求最短距离的算法) 在此算法中,我按照自己的理解去命名,理解起来会轻松一些. #define MAXSIZE 100 #define UNVISITED 0 #defi ...

  4. c++常见输入方法[持续更新]

    字符串输入 cin>> 使用空格确认字符串结束位置,保留换行符在输入队列当中 单个字符读取 cin.get(), cin.get(char) 每次读取一行: cin.getline(cha ...

  5. jQuery Attributes vs. Properties

    Attributes vs. Properties attributes和properties之间的差异在特定情况下是很重要.jQuery 1.6之前 ,.attr()方法在取某些 attribute ...

  6. ExtJs非Iframe框架加载页面实现

    在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域.而tab页面大多采用的嵌入一个iframe来显示内容.但是采用iframe方式有一个很大的弊端就是每次在加载一个新 ...

  7. 实用的树形菜单控件tree

     jQuery plugin: Treeview  这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree  jsTree ...

  8. IAR Build from the command line 环境变量设置

    http://supp.iar.com/Support/?Note=47884 Technical Note 47884 Build from the command line The alterna ...

  9. 以优美方式编写JavaScript代码

    英文原文:CoffeeScript: The beautiful way to write JavaScript 我用 JavaScript 编程很多年了,写了大量的 JavaScript 代码,即便 ...

  10. hdu 4499 Cannon dfs

    Cannon Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4499 D ...