上篇博客我们讲过了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. Codeforces 543D. Road Improvement (树dp + 乘法逆元)

    题目链接:http://codeforces.com/contest/543/problem/D 给你一棵树,初始所有的边都是坏的,要你修复若干边.指定一个root,所有的点到root最多只有一个坏边 ...

  2. 编译安装-Percona 5.6

    CentOS 6.4编译安装Percona 5.6.16 Percona 下载地址:http://www.percona.com 一.卸载原有MySQL检查是否安装有MySQL Server: rpm ...

  3. C++、GDAL创建shapefile文件

    源代码网址:http://download.csdn.net/detail/ivanljf/5834823 一.先贴出第一段代码: #include "ogrsf_frmts.h" ...

  4. mysql中key 、primary key 、unique key 与index区别

    一.key与primary key区别 CREATE TABLE wh_logrecord ( logrecord_id ) NOT NULL auto_increment, ) default NU ...

  5. spring 切面 前置后置通知 环绕通知demo

    环绕通知: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...

  6. HTML第六天学习笔记

    今天主要对思维导图笔记进行了整理与更新:

  7. Why isn't there a SendThreadMessage function?

    Here's an interesting customer question: Windows has PostMessage and SendMessage. It also has PostTh ...

  8. hdu oj Period (kmp的应用)

    Period Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  9. HTML5 自动聚焦 属性

    原文 : HTML5 autofocus Attribut 原文发布时间: 2012年08月27日 翻译时间: 2013年8月6日 HTML5 推出了一大堆精彩的东西给我们. 过去我们要用JavaSc ...

  10. SSI框架中配置log4j

    事实上主要是log4j配置,跟SSI关系不大. web.xml中加入 <context-param> <param-name>log4jConfigLocation</p ...