jQuery效果
2016-06-05 02:07
417 查看
1.jQuery效果－隐藏和显示
我们可以通过jQuery的hide()和show()方法来隐藏和显示HTML元素语法如下
$(selector).hide(speed,callback);
\$(selector).show(speed,callback);
其中speed参数为可选参数，用其来确定隐藏／显示的速度，可以取以下值’slow’，’fast’，或毫秒
callback也为可选参数，它为操作完成后所执行的回调函数
无参的hide()，show()方法实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = 'jquery.js'></script>
<script>
$(document).ready(function () {
$('.hide').click(function () {
$('p').hide();
});
$('.show').click(function () {
$('p').show();
});
});
</script>
</head>
<body>
<p>如果点隐藏我就会消失，点显示我就会出来</p>
<button class="hide" type="button">隐藏</button>
<button class="show" type="button">显示</button>
</body>
</html>我们也可以使用toggle()方法来切换hide()和show()方法
toggle实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = 'jquery.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('p').toggle();
});
});
</script>
</head>
<body>
<p>切换</p>
<button type="button">切换</button>
</body>
</html>2.jQuery效果-淡入淡出
通过jQuery我们可以实现元素的淡入淡出效果jQuery拥有下面四种fade方法
.fadeIn()
.fadeOut()
.fadeToggle()
.fadeTo()
(1)fadeIn
fadeIn的语法如下
$(selector).fadeIn(speed,callback);
实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = 'jquery.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('.div1').fadeIn();
$('.div2').fadeIn('slow');
$('.div3').fadeIn(3000);
});
});
</script>
</head>
<button type="button">点击这里使三个矩形淡出</button>
<br><br>
<div class="div1" style="width: 80px;height: 80px;display: none;background-color: red;">
</div><br>
<div class="div2" style="width: 80px;height: 80px;display: none;background-color: green;">
</div><br>
<div class="div3" style="width: 80px;height: 80px;display: none;background-color: blue;">
</div><br>
</body>
</html>(2)fadeOut
fadeOut用于淡出可见元素
实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = 'jquery.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('.div1').fadeOut();
$('.div2').fadeOut('slow');
$('.div3').fadeOut(3000);
});
});
</script>
</head>
<button type="button">点击这里使三个矩形淡出</button>
<br><br>
<div class="div1" style="width: 80px;height: 80px;background-color: red;">
</div><br>
<div class="div2" style="width: 80px;height: 80px;background-color: green;">
</div><br>
<div class="div3" style="width: 80px;height: 80px;background-color: blue;">
</div><br>
</body>
</html>(3)fadeToggle
fadeToggle方法可以在fadeIn()与fadeOut()方法之间进行切换
实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = 'jquery.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('.div1').fadeToggle();
$('.div2').fadeToggle('slow');
$('.div3').fadeToggle(3000);
});
});
</script>
</head>
<button type="button">点击这里使三个矩形淡入淡出</button>
<br><br>
<div class="div1" style="width: 80px;height: 80px;background-color: red;">
</div><br>
<div class="div2" style="width: 80px;height: 80px;background-color: green;">
</div><br>
<div class="div3" style="width: 80px;height: 80px;background-color: blue;">
</div><br>
</body>
</html>(4)fadeTo
fadeTo()方法允许渐变为给定的不透明度
实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = 'jquery.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('.div1').fadeTo('slow',0.15);
$('.div2').fadeTo('slow',0.4);
$('.div3').fadeTo('slow',0.7);
});
});
</script>
</head>
<button type="button">点击这里使三个矩形淡出</button>
<br><br>
<div class="div1" style="width: 80px;height: 80px;background-color: red;">
</div><br>
<div class="div2" style="width: 80px;height: 80px;background-color: green;">
</div><br>
<div class="div3" style="width: 80px;height: 80px;background-color: blue;">
</div><br>
</body>
</html>3.jQuery效果-滑动
我们可以在元素上创建滑动效果jQuery拥有以下滑动方法
.slideDown()
.slideUp()
.slideToggle()
slideToggle实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = 'jquery.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('.div1').fadeTo('slow',0.15);
$('.div2').fadeTo('slow',0.4);
$('.div3').fadeTo('slow',0.7);
});
});
</script>
</head>
<button type="button">点击这里使三个矩形淡出</button>
<br><br>
<div class="div1" style="width: 80px;height: 80px;background-color: red;">
</div><br>
<div class="div2" style="width: 80px;height: 80px;background-color: green;">
</div><br>
<div class="div3" style="width: 80px;height: 80px;background-color: blue;">
</div><br>
</body>
</html>4.jQuery效果-动画
jQuery的animate()方法用于创建自定义动画语法
$(selector).animate({params},speed,callback);
.必须的params参数定义形成动画的CSS属性
.可选的speed参数规定效果的时长
.可选的callback参数是动画完成后执行的回调
(1)下面的例子演示animate()方法的简单应用，它把div元素移动到左边，知道left属性等于250像素为止
实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = 'jquery.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('div').animate({left:'300px'},4000);
});
});
</script>
</head>
<body>
<button type="button">开始动画</button>
<br><br>
<div style="background: #98bf21;height: 100px;width: 100px;position: absolute;">
</div>
</body>
</html>(2)生成动画的过程中我们可以使用多个属性
实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = 'jquery.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('div').animate({
heigth:'150px',
width:'150px',
opacity:'0.5',
left:'300px'},4000);
});
});
</script>
</head>
<body>
<button type="button">开始动画</button>
<br><br>
<div style="background: #98bf21;height: 100px;width: 100px;position: absolute;">
</div>
</body>
</html>(3)队列功能
jQuery提供针对动画的队列功能
实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = 'jquery.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
var div = $('div');
div.animate({height:'300px',opacity:'0.4'},'slow')
div.animate({width:'300px',opacity:'0.8'},'slow')
div.animate({height:'100px',opacity:'0.4'},'slow')
div.animate({width:'100px',opacity:'0.8'},'slow')
});
});
</script>
</head>
<body>
<button type="button">开始动画</button>
<br><br>
<div style="background: #98bf21;height: 100px;width: 100px;position: absolute;">
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery中$.ajax()方法参数详解
- Jquery 中 ajaxSubmit使用讲解
- JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
- jQuery四种选择器使用及示例
- jquery判断input值不为空的方法
- $().each和$.each 的区别
- jQuery（一）jQuery四种选择器
- jQuery（二）jQuery链式语法在遍历中的使用
- jQuery（三）jQuery事件执行/简单事件/复合事件
- jquery实现hover图片半透明效果
- jquery自制分页，控制easyui datagrid分页，集中处理了一下前后台
- jQuery EasyUI时间戳自定义时间显示格式类型
- 最好用的placeholder插件,jQuery插件EnPlaceholder
- jQuery（二）
- jQuery（一）
- jQuery ajax + ajaxfileupload.js插件 实现无刷新文件上传
- jQuery选择器
- jQuery Validate验证框架详解
- jquery,php之间的ajax关系以及json
- jQuery和DOM对象转化