實例

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

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例