收藏
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<link rel="icon" type="image/x-icon" href="images/2.png">
<script src="https://code.jquery.com/jquery-3.1.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: red;text-align: center;line-height: 160px;position: relative;}
.content button{height: 40px;width: 200px;border:none;}
#box{width: 95px;height: 40px;border:none;}
#text{text-shadow: 3px 3px 3px #ff6500;color: #fff;font-size: 25px;}
</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">~ 我是fadeOut ~</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>
<div class="content">
<button class="btu12">callback</button>
<p class="box12">~ 我是callback ~</p>
</div>
<script>
$(function(){
// jQuery显示/隐藏
// hide(speed,callback) 隐藏显示的元素
$('.btu1').click(function(){
$('.box1').hide()
})
// 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(3000)
})
// fadeOut(speed,callback)用于淡出可见元素;
$('.btu5').click(function(){
$('.box5').fadeOut(3000)
})
// fadeTo(speed,opacity,callback) 把所有匹配到元素的不透明度以渐进发方式调整到指定的不透明度;
//opacity：fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度（值介于0与1之间）
$('.btu6').click(function(){
$('.box6').fadeTo(3000,0.3)
})
// 滑动效果
// slideDown(speed,callback)通过高度的变化，向下增大的动态效果 下滑效果;
$('.box7').hide()
$('.btu7').click(function(){
$('.box7').slideDown(500)
})
// slideUp(speed,callback)通过高度的变化，向上减小的动态效果 上滑效果;
$('.btu8').click(function(){
$('.box8').slideUp(500)
})
// 动画效果
// jQuery中我们使用 animate()方法创建自定义的动画
// animate(speed,callback) 方法用于创建自定义动画;
// 语法: $(selector).animate({params},speed,callback);
$('.btu9').click(function(){
$('.box9').animate({fontSize:'10px'},1500)//属性名称font-size 一律改成驼峰写法：fontSize
})
$('.btu10').click(function(){
$('.box10').animate({
opacity:'0.3',
left:'400px',
width:'200px',
height:'200px',
lineHeight:'200px'
},1500)
})
// 停止动画：
// stop() 方法用于停止动画或效果，在它们完成之前,该方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
$('.btu11').click(function(){
$('.box10').stop()
})
// callback
$('.btu12').click(function(){
$('.box12').hide(1000,function(){
$('body').css('background','#05F5E5')
})
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
