实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例