前端开发之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(欧洲计算机制造协会)定义了规范的版本, ...
随机推荐
- 快速切题 poj 2996 Help Me with the Game 棋盘 模拟 暴力 难度:0
Help Me with the Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3510 Accepted: ...
- FOR UPDATE
1. for update的使用场景 `如果遇到存在高并发并且对于数据的准确性很有要求的场景,是需要了解和使用for update的. 比如涉及到金钱.库存等.一般这些操作都是很长一串并且是开启 ...
- 关于C#引用dll动态链接库文件的注释问题
1.dll动态库文件项目生成属性中要勾选"XML文档文件" 注意:1).要选中项目,查看项目属性,选中解决方案是找不到的.2).XML文件的名字不要修改. 2.添加引用时XML文件 ...
- iOS-----使用GCD实现多线程
使用GCD实现多线程 GCD的两个核心概念如下: 队列 队列负责管理开发者提交的任务,GCD队列始终以FIFO(先进先出)的方式来处理任务---但 由于任务的执行时间并不相同,因此先处理的任务并一定先 ...
- arcotg_udc: exports duplicate symbol imx_usb_create_charger (owned by kernel)
/********************************************************************************* * arcotg_udc: exp ...
- BZOJ3297: [USACO2011 Open]forgot（背包）
3297: [USACO2011 Open]forgot Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 189 Solved: 126[Submit ...
- BZOJ3295: [Cqoi2011]动态逆序对（树状数组套主席树）
3295: [Cqoi2011]动态逆序对 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 7465 Solved: 2662[Submit][Sta ...
- fusionjs 学习二 核心概念
核心概念 middleware 类似express 的中间件模型(实际上是构建在koa中间件模型上的),但是和koa 的中间件有差异 fusionjs 的中间件同时可以运行在浏览器页面加载的时候 se ...
- sourcegraph 方便的代码查看工具
sourcegraph 是一个方便的代码查看插件,有chrome 的插件,具体安装可以在chrome 应用商店,同时 官方提供了基于docker 运行的方式(适合本地使用) 下载镜像 docker p ...
- Mybatis 插件实现动态设置参数
原文地址:Mybatis 插件实现动态设置参数 博客地址:http://www.extlight.com 一.背景 笔者在搭建架构时,通常会利用泛型对 dao 层 和 service 层公共的代码(增 ...