上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结。总结一些常见的常用的基本效果的必备方法。从隐藏显示,淡入淡出,滑动,动画等几个方面来简单总结一下。

一,JQuery实现隐藏显示的功能:

1,jQuery hide() 和 show()

通过 jQuery,您可以使用hide() 和 show() 方法来隐藏和显示 HTML 元素:

2,jQuery toggle()

通过 jQuery,您可以使用toggle() 方法来切换 hide() 和 show() 方法。

3,语法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

可选的speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的callback 参数是隐藏或显示完成后所执行的函数名称。

我用toggle来举个例子:

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

二,淡入淡出动画效果功能:

方法名

含义

语法

fadeIn()

用于淡入已隐藏的元素

$(selector).fadeIn(speed,callback);

fadeout()

用于淡出可见元素

$(selector).fadeOut(speed,callback);

fadeToggle()

可以在 fadeIn() 与 fadeOut() 方法之间进行切换 ,和上边的toggle功能一样

$(selector).fadeToggle(speed,callback);

fadeTo()

允许渐变为给定的不透明度(值介于 0 与 1 之间)。

$(selector).fadeTo(speed,opacity,callback);
其中:opacity为不透明度的参数(0——1之间)

我们来拿fadeTo来几个例子:

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head> <body>
<p>演示带有不同参数的 fadeTo() 方法。</p>
<button>点击这里,使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

效果图,大家自己copy一份代码运行来试试看吧!

三,滑动效果的功能,这个大家看一下这几个方法即可了,例子不在举例,和上边的都大同小异:

方法名

含义

语法

slideDown

用于向下滑动元素

$(selector).slideDown(speed,callback);

slideUp

用于向上滑动元素

同上

slideToggle

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

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

同上

四,动画效果,这个相对来说好看一下,也复杂一下,不过它仅仅使用了一个方法:

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法:

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

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

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

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

我们来看一个例子:这个例子同时使用了多次amimate方法,使其动画连贯了起来:

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("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");
});
});
</script>
</head> <body> <button>开始动画</button>
<p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div> </body>
</html>
</span>

五,几种效果的补充:

上边为我们常见的几种JQuery方便快捷实现的效果,这里再学习几个跟他们相关的几个方法。

1,jQuery stop() 方法:

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

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

语法:

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

解释:

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

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

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

2,上边几种动画方法语法中提到的callback函数,也就是在执行完当前动画以后要执行的函数。一定要现在callback中,否则会出现顺序不正确的结果。这里不再演示。

3,Chaining,也就是链,意思是说可以把我们上边的几种动画连写起来,这样就不需要多次查找相同的元素。看一个例子:

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function(){
//当然这里换行来写,使其格式看着更漂亮
$("#p1").css("color","red").slideUp().slideDown();
});
});
</script>
</head> <body> <p id="p1">jQuery 链锁反应</p>
<button>点击这里</button> </body>
</html>
</span>

综上为JQuery实现的几种常见的动画效果,虽然简单,但是非常实用,我们可以通过举一反三来使其达到更好的效果。当然更多效果方法我们可以通过JQuery的API来查询,可以更多的满足我们!!!

最新文章

  1. 一步一步打造自己的Android图片浏览器(原创)
  2. Docker学习过程中遇到的问题及解决方法
  3. mysql 动态新建以及删除分区表
  4. 纯js代码实现手风琴特效
  5. 虚拟机安装Ubuntu三种网络模式
  6. ssh免密登录
  7. pause 和 title
  8. Using RestTemplate, how to send the request to a proxy first so I can use my junits with JMeter?
  9. Codeforces 294B Shaass and Bookshelf(记忆化搜索)
  10. YTU 2621: B 继承 圆到圆柱体
  11. PAT-乙级-1029. 旧键盘(20)
  12. 经验总结17--submitbutton,ajax提交
  13. 【转】使用命令行方式创建和启动android模拟器
  14. poj2365---求多边形边长总和
  15. CCNA实验(8) -- PPP &amp; HDLC
  16. Django——模板层(template)(模板语法、自定义模板过滤器及标签、模板继承)
  17. IE兼容swiper
  18. ASP.NET Core 如何在运行Docker容器时指定容器外部端口
  19. 机器学习周志华 pdf统计学习人工智能资料下载
  20. Nginx负载-nginx转发到Swoole服务器(nginx配置文件变更)

热门文章

  1. Swift Strings and Characters
  2. java学习笔记day02
  3. mysql操作SQL语句
  4. JQ图片跟着鼠标走
  5. 关于JS变量和作用域
  6. Citrix 服务器虚拟化之十一 Xenserver管理vApps
  7. 国外程序员收集整理的PHP资源大全
  8. webStorm 列编辑
  9. shopnc 发票项目
  10. Red and Black(水)