jquery 渐入渐出 特效

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<link href="enrollment.css" rel="stylesheet" type="text/css">

<title>onBoarding</title>

</head>

<body>

<div id="wrapper">

<div class="headerBox_3rd">

<div id="logo_3rd">

  <img alt="logo" src="static/images/AH-logoX1.png">

</div>

<div id="proImg_3rd">

   <img alt="logo" src="hp-imgX1.png">

</div>

</div>

 

<div class="onBoardingInfoBox_3rd">

<div class="onBoardingBox_3rd">

   <div class="box_title_3rd"><h4>Client Information</h4></div>

   <div class="box_container_3rd">

   <table>

   <tbody>

   <tr>

       <td class="td_left_3rd">User Name</td>

           <td class="td_right_3rd">[email protected]</td>

       </tr>

       <tr>

       <td class="td_left_3rd">User Group</td>

           <td class="td_right_3rd">NMS21</td>

       </tr>

       <tr>

       <td class="td_left_3rd">Device Mac</td>

           <td class="td_right_3rd">KDKA:O12K:DALA:DSLF</td>

       </tr>

       <tr>

       <td class="td_left_3rd">Device OS Type</td>

           <td class="td_right_3rd">IOS</td>

       </tr>

       

       <tr>

       <td class="td_left_3rd">Device Ownership</td>

       <td class="td_right_3rd">Corporate owned devices</td>

       </tr>

   </tbody>

   </table>

</div>

</div>

</div>

 

<div class="onBoardingOpearteBox_3rd">

<div class="opearteContainer_3rd">

<div id="agreementChoise_3rd">

<p id="p1_3rd"><input name="choice" class="enrollApAgreementTitle" type="checkbox" /></p>

<p id="p2_3rd">

   I agree to the <a>End User Policy</a>

</p>

</div>

    

<div id="onBoardingButton_3rd">

<button type="button" class="button blue" id="J_mdm">Enroll the Device</button>

</div>

</div>

</div>

 

<div class="onBoardingProgressBox_3rd">

<div class="progressContainer_3rd">

 

<div class="progressImg_ct" id="waitProgress_3rd">

  <p class="progressImg"><img alt="waiting" src="loading.gif"></p>

  <p class="progressWord">Modify Enrollment in process...</p>

</div>

 

<div class="progressImg_ct" id="successProgress_3rd">

  <p class="progressImg"><img alt="waiting" src="wait_1.gif"></p>

  <p class="progressWord">

   Your iPad (Device Name here) is enrolled successfully !

  </p>

</div>

 

<div class="progressImg_ct" id="failProgress_3rd">

  <p class="progressImg"><img alt="waiting" src="att_2.png"></p>

  <p class="progressWord">

 Your iPad Enrollment is Failed!  

 Please make sure your Wi-Fi connection is correct and try again. 

 If still not working please contact with your IT Admin.

  </p>

</div>

 

<div class="progressImg_ct" id="WififailProgress_3rd">

  <p class="progressImg"><img alt="waiting" src="error1.png"></p>

  <p class="progressWord">

  Push Wi-Fi setting on your iPad (iPad Name here) Failed!  

  Please make sure your Wi-Fi connection is correct and try again. 

  If still not working please contact with your IT Admin.

  </p>

</div>

</div>

</div>

 

 

 

<script> 

$(document).ready(function(){

  $("#J_mdm").click(function(){

    

    

    div=$("#WififailProgress_3rd");

    div.slideToggle("slow");

    

    var div=$("#waitProgress_3rd");

    div.slideToggle("slow");

    

    

  });

});

</script> 

 

 

</div>

 

</body>

</html>

你可能感兴趣的:(jquery)