jQuery -- 光阴似箭（二）：jQuery效果的使用
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效果的使用的更多相关文章
- 强大的JQuery（二）--动画效果
上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...
- 【前端】用jQuery实现瀑布流效果
jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...
- 使用jquery实现选项卡切换效果
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
- 前端学习之jquery（二）
操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").remo ...
- jQuery的事件,动画效果等
一.事件 click(function(){}) 点击事件 hover(function(){}) 悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){}) ...
- python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- WEB入门之十二 jquery简介
学习内容 jQuery简介 搭建jQuery开发环境 jQuery基本选择器 能力目标 熟悉jQuery开发环境 能编写简单的jQuery代码 本章简介 在前面两章,我们学习了JavaScript面向 ...
- 应该掌握的JQuery的7个效果
一: 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 实例 //点击隐藏 $("#hide&q ...
- 基于jQuery图像碎片切换效果插件FragmentFly
基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览 源码下载 部分代码: <div class="all_ ...
- 3种jQuery弹出大图效果
本实例用到了jquery.imgbox.pack.js库.直接看代码: <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- Perl读取标准输入<STDIN>、读取文件输入<>和chomp函数
读取标准输入<STDIN> <STDIN>表示从标准输入中读取内容,如果没有,则等待输入.<STDIN>读取到的结果中,如果没有意外,都会自带换行符. 例如,tes ...
- 个渣渣C语言之数组
---恢复内容开始--- 学c语言就知道数组.指针在c中有着特殊的地位.而且是必须掌握的一项知识,学会它会让你受益无穷. 一.数组 1.数组:室友一系列相同元素构成的.它连续的存储在内存中. 2.数组 ...
- does not support SSL connections
语言:C# 开发工具:Visual Studio 2017 问题场景介绍: nuget引用的MySql.Data版本是6.10.5,MySQL的数据库连接串如下: Server=xxx;Databas ...
- 从零开始学安全(十六)● Linux vim命令
游标控制 h 游标向左移 j 游标向下移 k 游标向上移 l (or spacebar) 游标向右移 w 向前移动一个单词 b 向后移动一个单词 e 向前移动一个单词,且游标指向单词的末尾 ( 移到当 ...
- 29.QT-自定义窗口拖动、自定义QToolButton/QPushButton开关按钮、界面阴影,声音等总结
自定义窗口及拖动 1.自定义无边框窗口时,需要将窗口标志设为: Qt::FramelessWindowHint |Qt::WindowSystemMenuHint | Qt::WindowMinMax ...
- 回客科技 面试的 实现ioc 容器用到的技术，简述BeanFactory的实现原理，大搜车面试的 spring 怎么实现的依赖注入（DI）
前言:这几天的面试,感觉自己对spring 的整个掌握还是很薄弱.所以需要继续加强. 这里说明一下spring的这几个面试题,但是实际的感觉还是不对的,这种问题我认为需要真正读了spring的源码后说 ...
- 【Java每日一题】20170216
20170215问题解析请点击今日问题下方的“[Java每日一题]20170216”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; public cla ...
- java动态获取WebService的两种方式（复杂参数类型)
java动态获取WebService的两种方式(复杂参数类型) 第一种: @Override public OrderSearchListRes searchOrderList(Order_Fligh ...
- centos6 自带python2.6升级python2.7+
centos6系统自带Python为2.6.6版本,升级搞版本操作如下(python2-python3都一样) 1.下载需要升级的python包 官方下载地址:https://www.python.o ...
- 20.Odoo产品分析 (三) – 人力资源板块(1) – 员工目录(1)
查看Odoo产品分析系列--目录 人力资源指在一个国家或地区中,处于劳动年龄.未到劳动年龄和超过劳动年龄但具有劳动能力的人口之和.狭义讲就是企事业单位独立的经营团体所需人员具备的能力(资源).(解释来 ...