jQuery -- 知识点回顾篇(二):jQuery效果的使用

1. jQuery 效果 -- 隐藏和显示:  使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btnHide").click(function(){
$("#myDiv1").hide();
//语法格式:$(selector).hide(speed,callback);
//可选参数1:speed 参数规定隐藏/显示的速度,可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是隐藏或显示完成后所执行的函数名称。 // callback的使用如下,即第2个参数是一个函数,jQuery效果执行完会执行该函数。
// $("#myDiv1").hide(3000,function(){
// alert("myDiv1隐藏了");
// });
}); $("#btnShow").click(function(){
$("#myDiv1").show();
//语法格式:$(selector).show(speed,callback);
//可选参数1:speed 参数规定隐藏/显示的速度,可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是隐藏或显示完成后所执行的函数名称。
});
});
</script>
</head>
<body>
<button type="button" id="btnHide">隐藏</button>
<button type="button" id="btnShow">显示</button>
<div id="myDiv1" style="width:100px;height:50px;background-color:green"></div>
</body>
</html>

    

2. jQuery 效果 - 淡入淡出

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

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

  (3) fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出,则添加淡入效果。如果元素已淡入,则添加淡出效果。

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btnfadeIn").click(function(){
$("#myDiv1").fadeIn();
//语法格式:$(selector).fadeIn(speed,callback);
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是该效果完成后所执行的函数名称。
}); $("#btnfadeOut").click(function(){
$("#myDiv1").fadeOut();
//语法格式:$(selector).fadeOut(speed,callback);
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是该效果完成后所执行的函数名称。
}); $("#btnfadeToggle").click(function(){
$("#myDiv1").fadeToggle();
//语法格式:$(selector).fadeToggle(speed,callback);
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是该效果完成后所执行的函数名称。
}); $("#btnfadeTo").click(function(){
$("#myDiv1").fadeTo("slow",0.35);
//语法格式:$(selector).fadeTo(speed,opacity,callback);
//第一个参数是必须的:传入的值可以是"slow"、"fast" 、毫秒;
//第二个参数是必须的:传入值是透明度,取值在0-1之间
//第三个参数是可选的:callback 参数是该效果完成后所执行的函数名称。
});
});
</script>
</head>
<body>
<button type="button" id="btnfadeIn">fadeIn</button>
<button type="button" id="btnfadeOut">fadeOut</button>
<button type="button" id="btnfadeToggle">fadeToggle</button>
<button type="button" id="btnfadeTo">fadeTo</button>
<div id="myDiv1" style="width:200px;height:100px;background-color:green"></div>
</body>
</html>

3. jQuery 效果 - 滑动

  (1) slideDown() 方法用于向下滑动元素。

  (2) slideUp() 方法用于向上滑动元素。

  (3) slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素已向下滑动,则向上滑动它们。如果元素已向上滑动,则向下滑动它们。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btnslideDown").click(function(){
$("#myDiv1").slideDown();
//语法格式:$(selector).slideDown(speed,callback);
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是滑动完成后所执行的函数名称。
}); $("#btnslideUp").click(function(){
$("#myDiv1").slideUp();
//语法格式:$(selector).slideUp(speed,callback);;
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是滑动完成后所执行的函数名称。 }); $("#btnslideToggle").click(function(){
$("#myDiv1").slideToggle();
//语法格式:$(selector).slideToggle(speed,callback);;
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是滑动完成后所执行的函数名称。
}); });
</script>
</head>
<body>
<button type="button" id="btnslideDown">slideDown</button>
<button type="button" id="btnslideUp">slideUp</button>
<button type="button" id="btnslideToggle">slideToggle</button>
<div id="myDiv1" style="width:200px;height:100px;background-color:green"></div>
</body>
</html>

4. jQuery 效果 - 动画

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btn_animate").click(function(){
$("#myDiv1").animate({left:'250px'});
//语法格式:$(selector).animate({params},speed,callback);
//第一个参数是必须的:值是定义形成动画的 CSS 属性
//第二个参数是可选的:传入的值是"slow"、"fast" 、毫秒
//第三个参数是可选的:callback 参数是该效果完成后所执行的函数名称 //第一个参数的css属性也可以使用相对值,像下面这样
//$("#myDiv1").animate({left:'250px',height:'+=10px',width:'+=10px'});
}); });
</script>
</head>
<body>
<button type="button" id="btn_animate">animate</button>
<div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div>
</body>
</html>

5. jQuery -- 停止动画

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btn_animate").click(function(){
$("#myDiv1").animate({left:'250px'},5000);
}); $("#btn_stop").click(function(){
$("#myDiv1").stop();
//语法格式:$(selector).stop(stopAll,goToEnd);
//可选参数1:规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
//可选参数2:规定是否立即完成当前动画。默认是 false。
}); });
</script>
</head>
<body>
<button type="button" id="btn_animate">animate</button>
<button type="button" id="btn_stop">Stop</button>
<div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div>
</body>
</html>

6. jQuery - 链式编程

  链式编程:在相同的元素上运行多条 jQuery 命令,一条接着另一条。这样的话,浏览器就不必多次查找相同的元素。如需链接一个动作,您只需简单地把该动作追加到之前的动作上。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btnLink").click(function(){
$("#myDiv1").css("background-color","yellow").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<button type="button" id="btnLink">链式编程</button>
<div id="myDiv1" style="width:100px;height:50px;background-color:green"></div>
</body>
</html>

jQuery -- 光阴似箭(二):jQuery效果的使用的更多相关文章

  1. 强大的JQuery(二)--动画效果

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

  2. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  3. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  4. 前端学习之jquery(二)

    操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").remo ...

  5. jQuery的事件,动画效果等

    一.事件 click(function(){}) 点击事件 hover(function(){})   悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){}) ...

  6. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  7. WEB入门之十二 jquery简介

    学习内容 jQuery简介 搭建jQuery开发环境 jQuery基本选择器 能力目标 熟悉jQuery开发环境 能编写简单的jQuery代码 本章简介 在前面两章,我们学习了JavaScript面向 ...

  8. 应该掌握的JQuery的7个效果

    一: 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 实例 //点击隐藏 $("#hide&q ...

  9. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  10. 3种jQuery弹出大图效果

    本实例用到了jquery.imgbox.pack.js库.直接看代码: <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. Go Web:处理请求

    处理请求 Request和Response http Requset和Response的内容包括以下几项: Request or response line Zero or more headers ...

  2. golang包管理解决之道——go modules初探

    golang的包管理是一直是为人诟病之处,从golang1.5引入的vendor机制,到准官方工具dep,目前为止还没一个简便的解决方案. 不过现在go modules随着golang1.11的发布而 ...

  3. 在Fragment中保存WebView状态

    http://www.lucazanini.eu/2013/android/how-to-save-the-state-of-a-webview-inside-a-fragment-of-an-act ...

  4. [转]php 图片验证码生成 前后台验证

    本文转自:https://www.cnblogs.com/xiaoyezi/p/3541195.html 自己从前一段时间做了个php小项目,关于生成图片验证码生成和后台的验证,把自己用到的东西总结一 ...

  5. 结构型---外观模式(Facade Pattern)

    定义 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用.使用外观模式时,我们创建了一个统一的类,用来包装子系统中一个或多个复杂的类,客户端可以直接通 ...

  6. SQL Server 本地数据库登录不上 解决方法

    sql本地数据库登录不了的话.先看看自己计算机 服务 SQL server  (MSSQLSERVER)  没有打开的话,请打开. 今天说的情景模式是  你误删了windows登录:禁用了sa登录:s ...

  7. EF 传递的主键值的数量必须与实体上定义的主键值的数量匹配 原因

    主要是该数据表没有定义主键造成的

  8. [Linux] 简单安装和使用composer

    wget https://getcomposer.org/installer //下载一个脚本文件 php installer //php执行下这个php脚本 mv composer.phar /us ...

  9. 29.C++- 异常处理

    C++内置了异常处理的语法元素 try catch try语句处理正常代码逻辑 当try语句发现异常时,则通过throw语句抛出异常,并退出try语句 catch语句处理异常情况 当throw语句抛出 ...

  10. 【Mybatis】MyBatis调用带有返回结果、output参数的存储过程上与ibatis的区别

    用过mybatis的应该都知道它是ibatis被Google收购后重新命名的一个工程,因此也做了大量升级.本文就来介绍下两者在调用存储过程上的一点区别,ibatis有一个专门的标签<proced ...