实例
<!DOCTYPE html>
<html>
<head>
<title>jQuery第四节课</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin:0;padding: 0; }
.content{margin:20px;font-size:20px;color: #fff;float: left; }
.content p{height: 160px;width: 200px;background:#00D2DB;text-align: center;line-height: 160px;position: relative;}
.content button{height: 40px;width: 200px;border:none;background: #f2f2f2;outline: none;}
.content button:hover{color:#00D2DB;font-weight: bolder;}
#box{width: 95px;height: 40px;border:none;}
</style>
</head>
<body>
<div class="content">
<button class="btu1">点我隐藏</button>
<p class="box1">~ 我是hide ~</p>
</div>
<div class="content">
<button class="btu2">点我显示</button>
<p class="box2">~ 我是show ~</p>
</div>
<div class="content">
<button class="btu3">事件切换</button>
<p class="box3">~ 我是toggle ~</p>
</div>
<div class="content">
<button class="btu4">淡入元素</button>
<p class="box4">~ 我是fadeIn ~</p>
</div>
<div class="content">
<button class="btu5">淡出元素</button>
<p class="box5">~ 我是fadeOut ~</p>
</div>
<div class="content">
<button class="btu6">淡出到指定值</button>
<p class="box6">~ 我是fadeTo ~</p>
</div>
<div class="content">
<button class="btu7">下滑效果</button>
<p class="box7">~ 我是slideDown~</p>
</div>
<div class="content">
<button class="btu8">上滑效果</button>
<p class="box8">~ 我是slideUp ~</p>
</div>
<div class="content">
<button class="btu9">动画效果</button>
<p class="box9">~ 我是animate ~</p>
</div>
<div class="content ">
<button class="btu10" id="box">动画效果</button> <button class="btu11" id="box">停止动画</button>
<p class="box10">~ 我是animate ~</p>
</div>
<script type="text/javascript">
$(function(){
// jQuery显示/隐藏
// hide(speed,callback) 隐藏元素
$('.btu1').click(function(){
$('.box1').hide(3000)
})
// show(speed,callback) 显示隐藏的元素
$('.box2').hide()
$('.btu2').click(function(){
$('.box2').show()
})
// toggle(speed,callback)事件切换 显示被隐藏的元素，并隐藏已显示的元素;
$('.btu3').click(function(){
$('.box3').toggle()
})
// 淡入淡出效果
// jQuery是通过控制不透明度的变化来控制匹配到的元素的淡入淡出效果
//fadeIn(speed,callback)用于淡入已隐藏的元素;
$('.box4').hide()
$('.btu4').click(function(){
$('.box4').fadeIn()
})
//fadeOut(speed,callback)用于淡出可见元素;
$('.btu5').click(function(){
$('.box5').fadeOut()
})
//fadeTo(speed opacity callback) 把所有匹配到元素的不透明度以渐进发方式调整到指定的不透明度;
//opacity：fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度（值介于0与1之间）
$('.btu6').click(function(){
$('.box6').fadeTo(1000,0.4)//速度也是必须参数
})
// 滑动效果
// jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素
//slideDown(speed,callback)通过高度的变化，向下增大的动态效果 下滑效果;
$('.box7').hide()
$('.btu7').click(function(){
$('.box7').slideDown()
})
// slideUp(speed,callback)通过高度的变化，向上减小的动态效果 上滑效果;
$('.btu8').click(function(){
$('.box8').slideUp()
})
// 动画效果
//jQuery中我们使用 animate()方法创建自定义的动画
// animate(speed,callback) 方法用于创建自定义动画;
// 语法: $(selector).animate({params},speed,callback);
// 必需的 params 参数定义形成动画的 CSS 属性;
$('.btu9').click(function(){
$('.box9').animate({fontSize:'12px'},1500)//属性名称font-size 一律改成驼峰写法：fontSize
})
$('.btu10').click(function(){
$('.box10').stop().animate({
opacity:'0.3',
height:'400px',
lineHeight:'400px',
left:'400px'
},1500)//属性名称font-size 一律改成驼峰写法：fontSize
})
// 停止动画：
// stop() 方法用于停止动画或效果，在它们完成之前,该方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
//语法:$(selector).stop()
$('.btu11').click(function(){
$('.box10').stop()
})
// 事件切换
// hover(over,out)
// over:鼠标移上元素上要触发的一个函数
// out:鼠标移出元素上要触发的一个函数
// hover(
// function(){},
// function(){}
// )}
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例