前端开发之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(欧洲计算机制造协会)定义了规范的版本, ...
随机推荐
- JQuery中绑定事件（bind()）和移除事件（unbind()）
有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 ...
- Windows 7 IIS7.5上部署MVC实例
这段时间在用MVC写一个导游网站,在Window7上部署的时候,遇到和处理了一些问题. 现将完整的过程整理出来,供大家参考: 一.部署准备: 1.安装Microsoft .net FrameWork ...
- Python3 循环语句（十）
Python中的循环语句有 for 和 while. Python循环语句的控制结构图如下所示: while 循环 Python中while语句的一般形式: while 判断条件: 语句 同样需要注意 ...
- Outpost Security Suite Pro 8.1 – 免费4个月
OSS( 简称 )一款来自俄罗斯Agnitum公司的互联网安全产品. Outpost以网络防火墙知名,AVG和avast!等知名安全企业都有使用Outpost的防火墙技术. Outpost Secur ...
- vuex: 简单（弹窗）实现
在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数 ...
- Beta阶段第2周/共2周 Scrum立会报告+燃尽图 14
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2411] 版本控制:https://git.coding.net/liuyy08 ...
- 找到链表的倒数第k个节点 python
题目:给定一个链表的头节点,输出链表倒数第k个节点的值 分析:最简单的思路就按顺序访问链表节点,得到链表的长度x之后,再次从头节点出发,访问到第x-k+1个节点时,就是链表倒数第k个节点,但是这样的方 ...
- Swift 导航栏设置
let width = UIScreen.mainScreen().bounds.size.width let height = UIScreen.mainScreen().bounds.size.h ...
- 20155226 2016-2017-2 《Java程序设计》第8周学习总结
20155226 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 通用API 日志 java.util.logging包提供了日志功能相关类与接口,使用日志的 ...
- pe如何安装ios系统
1.进PE系统(老毛桃) 2.虚拟光驱加载ios系统 3.然后打开我的电脑,里面有个光盘,就像光盘插在光驱里打开电脑后的样子,双击安装系统.