前端开发之jQuery效果篇
主要内容：
一、显示与隐藏
显示与隐藏即 show() 和 hide() ，能够控制元素显示或隐藏。
实例：
<script type="text/javascript">
var isShow = true;
$('#btn').click(function () {
if(isShow){
$('.box').show(3000,function () {
$('.box').text('盒子现身了');
isShow = false;
$('#btn').text('隐藏');
})
}
else{
$('.box').hide(2000,function () {
$('.box').text('');
isShow = true;
$('#btn').text('显示');
})
}
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的效果</title>
<style type="text/css"> .box{
width: 300px;
height:200px;
border:2px solid gold;
display: none;
}
</style>
</head>
<body>
<div class="box"> </div>
<button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
// $('#btn').click(function () {
// $('.box').css('display','block');
// }); // jQuery提供了一些方法，如show(),hide() 控制元素显示或隐藏
var isShow = true;
$('#btn').click(function () {
if(isShow){
$('.box').show(3000,function () {
$('.box').text('盒子现身了');
isShow = false;
$('#btn').text('隐藏');
})
}
else{
$('.box').hide(2000,function () {
$('.box').text('');
isShow = true;
$('#btn').text('显示');
})
}
})
</script>
</html>
二、滑动效果
有两种实现方式，即 slideDown()/slideUp() 和 slideToggle().
第一种方式：使用 slideDown() 和 slideUp().
实例：
<script type="text/javascript">
$(document).ready(function () {
$('#btn').hover(function () {
$('#box').slideDown(2000,function () {
$(this).text('大吉大利，今晚吃鸡...');
});
},function () {
$('#box').slideUp(4000,function () {
$(this).text('');
});
})
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slide滑动效果</title>
<style type="text/css">
#box{
width:300px;
height:300px;
border:2px solid greenyellow;
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').hover(function () {
$('#box').slideDown(2000,function () {
$(this).text('大吉大利，今晚吃鸡...');
});
},function () {
$('#box').slideUp(4000,function () {
$(this).text('');
});
})
})
</script>
</html>
第二种方式：使用 slideToggle() 。
实例：
<script type="text/javascript">
$(document).ready(function () {
isShow = true;
$('#btn').click(function () {
$('#box').slideToggle(3000,function () {
if(isShow){
$('#btn').text('隐藏');
isShow = false;
}
else{
$('#btn').text('显示');
isShow = true;
}
});
})
})
</script>
</html>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slide滑动效果</title>
<style type="text/css">
#box{
width:300px;
height:300px;
border:2px solid greenyellow;
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
isShow = true;
$('#btn').click(function () {
$('#box').slideToggle(3000,function () {
if(isShow){
$('#btn').text('隐藏');
isShow = false;
}
else{
$('#btn').text('显示');
isShow = true;
}
});
})
})
</script>
三、淡入和淡出效果
1、几对效果，fadeIn / fadeOut，fadeTo，fadeToggle。
$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。 fadeOut() 方法用于淡出可见元素。$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。 fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
$(selector).fadeToggle(speed,callback); fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。 可选的 callback 参数是该函数完成后所执行的函数名称。
2、fadeIn / fadeOut 实例（fadeTo表示最终效果，配合淡入淡出使用）：
<script type="text/javascript">
$(document).ready(function () {
// 当鼠标从元素上移开时，改变元素的显示状态
$('#btn').mouseout(function(){
$('#box').fadeIn(3000); // fadeIn() 用于淡入已隐藏的元素。
//$('#box').fadeIn('slow');
$('#box').fadeOut(1000); // 淡出
$('#box').fadeTo(2000,0.3); // 最终状态
});
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fade淡入淡出</title>
<style type="text/css">
#box{
width:300px;
height:300px;
border:2px solid #b3d7ff;
display:none;
}
</style>
</head>
<body>
<div id="box"> </div>
<button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// 当鼠标从元素上移开时，改变元素的显示状态
$('#btn').mouseout(function(){
$('#box').fadeIn(3000); // fadeIn() 用于淡入已隐藏的元素。
// $('#box').fadeIn('slow');
$('#box').fadeOut(1000); // 淡出
$('#box').fadeTo(2000,0.3); // 最终状态
});
})
</script>
</html>
3、fadeToggle实例
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function(){
$('#box').toggle(3000);
$("#box").text("我会变身！");
$("#box").fadeTo(2000,0.3);
})
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fade淡入淡出</title>
<style type="text/css">
#box{
width:300px;
height:300px;
border:2px solid #b3d7ff;
display:none;
}
</style>
</head>
<body>
<div id="box"> </div>
<button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function(){
$('#box').toggle(3000);
$("#box").text("我会变身！");
$("#box").fadeTo(2000,0.3);
})
})
</script>
</html>
四、动画效果
关于动画效果，这里给大家介绍两种玩法。
玩法一：无延迟动画，即打开网页或点击接触选项等情况下，立即出现对应动画。
实例：
script type="text/javascript">
$(document).ready(function () {
$('#start').click(function () {
$('#box').animate({
width:'300px',
height:'300px',
},10000)
});
$('#stop').click(function () {
$('#box').stop()
})
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate动画</title>
<style type="text/css">
#box{
width:100px;
height:100px;
border:2px solid mediumspringgreen;
position: absolute;
font-size:14px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<button id="start">动画</button>
<button id="stop">停止</button>
<div id="box">
hello,everyone!
</div>
</body>
<script src="../jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#start').click(function () {
$('#box').animate({
width:'300px',
height:'300px',
},10000)
});
$('#stop').click(function () {
$('#box').stop()
})
})
</script>
</html>
玩法二：延迟播放动画，即 delay()。
实例：
<script type="text/javascript">
$(document).ready(function () {
$('#box').animate({
left:'200px',
top:'300px'
}).delay(2000).animate({top:'400px'}); // delay()是指的延迟 })
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate动画</title>
<style type="text/css">
#box{
width:100px;
height:100px;
border:2px solid mediumspringgreen;
position: absolute;
font-size:14px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<button id="start">动画</button>
<button id="stop">停止</button>
<div id="box">
hello,everyone!
</div>
</body>
<script src="../jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#box').animate({
left:'200px',
top:'300px' }).delay(2000).animate({top:'400px'}); // delay()是指的延迟
})
</script>
</html>
五、弹出广告效果
综合运用前几个方法，就可以得到弹出的广告效果。
实例：
<script type="text/javascript">
$(document).ready(function () {
$('#box').slideDown('normal').slideUp('fast').fadeIn(2000).click(function () {
$(this).fadeOut(1000);
})
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出广告</title>
<style type="text/css">
#box{
width:200px;
height:200px;
position:absolute;
right:10px;
bottom:0;
display:none;
}
</style>
</head>
<body>
<div id="box">
<img src="../../lufei.jpg" style="width:80%; height:50%;"/>
</div>
</body>
<script src="../jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#box').slideDown('normal').slideUp('fast').fadeIn(2000).click(function () {
$(this).fadeOut(1000);
})
})
</script>
</html>
前端开发之jQuery效果篇的更多相关文章
- 前端开发之jQuery库
使用jquery开发的时候,如果我们不想使用自己的jquery文件,那么可以引用现成的地址.方便日常开发使用 jquery-2.0以上版本 (注!不再支持IE 6/7/8) jquery-2.0.0百 ...
- 前端开发之jQuery位置属性和筛选方法
主要内容: 1.jQuery的位置属性及实例 (1)位置属性 (2)实例 --- 仿淘宝导航栏 2.jQuery的筛选方法及实例 (1)筛选方法 (2)实例一:嵌套选项卡 (3)实例二:小米官网滑动 ...
- 前端开发之jQuery属性和文档操作
主要内容: 1.jQuery属性操作 2.jQuery文档操作 一.jQuery属性操作 1.什么是jQuery的属性操作? jQuery的属性操作模块包括四个部分:html属性操作,dom属性操作, ...
- 前端开发之jQuery篇--选择器
主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换 一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...
- ＃笔记＃ 移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
- 移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
- Sea.js创始人玉伯的前端开发之路
在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...
- 【开源专访】Sea.js创始人玉伯的前端开发之路
摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
随机推荐
- jsp登录页面，展示错误信息，刷新页面后错误依然存在解决方案
在做登录页面的时候,通常使用form表单同步提交的方法进行提交的,也就是在form表单里去写action,如果登录失败,jsp通过jstl表达式获取错误信息展示在页面上,但是有一个问题就是,即使你刷新 ...
- 关于React setState的实现原理（一）
前言 首先在学习react的时候就对setSate的实现有比较浓厚的兴趣,那么对于下边的代码,可以快速回答吗? class Root extends React.Component { constru ...
- Linux:root下的文件-anaconda-ks.cfg详解
anaconda-ks.cfg详解 系统安装的时候生成的一个文件,通过这个文件可以修改成自动安装的脚本,用于自动安装同样配置的系统. 自动生成的启动文件anaconda# Kickstart file ...
- 创建目录mkdir
mkdir -p 在创建目录时,我们通常会先检查一下是否存在,如果不存在,就创建,这个时候通常用mkdir -p进行,但是-p是干什么用的呢. mkdir --help一下吧.也就说,如果上级目录不存 ...
- ios系统降级
1.使用PP助手/iTunes备份好文件资料,以防重要信息丢失: 2.设备连接iTunes,按住Shift键之后点击“恢复iPhone”,选择已下载好的iOS8.4.1固件,等待更新完成即可. 注意要 ...
- tomcat日志文件目录修改
tomcat每次启动时,自动在logs目录下生产以下日志文件,造成日志文件众多: 将logs的日志文件放置到新建的文件夹位置,避免主硬盘空间的占用.主要更改catalina.out的文件位置和每日的日 ...
- （转）ZooKeeper-3.3.4集群安装配置
转载于 千与 的 http://blog.csdn.net/shirdrn/article/details/7183503 ZooKeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向 ...
- window XP下 php5.5+mysql+apache2+phpmyadmin安装
学了将近大半年的php了,还没有装过独立的php环境,一直用的集成的.记得刚学时,一头雾水,不知改怎么搭配环境,就觉得特别复杂,各种看不懂,今天还是自己在XP环境下搭配了一个. 首先,下载php5.5 ...
- linux vi常用操作
1.基本操作 进入vi vi 或者 vim 进入一个文件或者新建一个文件 例如:vim 11.txt vi有3种模式 一般模式:刚进入时.按esc时. 编辑模式:按下字母[i, I, o, O, a, ...
- Dijkstra算法（C语言）
Dijkstra算法 1.定义概览 Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Di ...