前端开发之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(欧洲计算机制造协会)定义了规范的版本, ...
随机推荐
- PHP:第五章——字符串的概念
<?php header("Content-Type:text/html;charset=utf-8"); //字符串概念: //1.单引号.//里面的变量不会被解释 //例 ...
- 快速切题 sgu133.Border 离线
133. Border time limit per test: 0.25 sec. memory limit per test: 4096 KB Along the border between s ...
- bzoj1078
题解: 一道思路题(话说在那个时候有多少人知道左偏树) 考虑最后一个加进来的点 必然满足 (1)从它到根一直是左链上去的 (2)没有左右子树 在这些点中寻找一个最浅的 然后删除 代码: #includ ...
- Kotlin Reference (十一) Visibility Modifiers
most from reference 类,对象,接口,构造函数,函数,属性及setters具有可见性修饰符(getter总是具有和属性一样的可见性).在kotlin中油4个可视化修饰符:privat ...
- mcc,mex,mbuild
mcc将M文件转换成C/C++文件和相应的MEX包裹文件(需要Matlab编辑器),但在特定条件下可以自动调用mbuild或者mexmex将C/C++文件(入口函数为mexfunction())编译成 ...
- InputStream,String和Reader之间的转换
1.String –> InputStreamInputStrem is = new ByteArrayInputStream(str.getBytes());orByteArrayInputS ...
- 浅谈闭包（Closure）
一.闭包 好长时间对于闭包都知道与函数和其环境变量有关系,但是一直没有一个清晰的认识.今天查看了一下维基百科,顺便写下来. 二.闭包的定义 在编程语言中,闭包(语义闭包或函数闭包)是指哪些可以将语义范 ...
- 获取 graphql schema 信息
模块 npm install -g get-graphql-schema get-graphql-schema GRAPHQL_URL > schema.graphql 简单使用 使用prism ...
- macOS -- 如何通过终端开启/关闭SSH
在macOS中(较新版),基本都会配置了SSH,能完成我们开发中绝大部分功能,所以不需要再去使用第三方的软件去操作. 不过SSH守护进程是默认禁用的,我们需要手动开启 1. 查看是否开始SSH功能 s ...
- 容器平台选型的十大模式：Docker、DC/OS、K8S谁与当先？
首先我们来谈什么情况下应该使用Docker的问题 如图,左面是经常挂在嘴边的所谓容器的优势,但是虚拟机都能一一怼回去. 如果部署的是一个传统的应用,这个应用启动速度慢,进程数量少,基本不更新,那么 ...