`
endual
  • 浏览: 3558461 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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">wsong@aerohive.com</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导航菜单动画渐入渐出特效

    本文将深入探讨如何使用jQuery实现导航菜单的动画渐入渐出特效,以此提升用户体验,增加网站的互动性和吸引力。 首先,jQuery是一个强大的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画效果以及Ajax...

    jquery大号渐入渐出效果.rar

    标题中的“jquery大号渐入渐出效果.rar”指的是一个使用jQuery库实现的大型文本或元素渐显渐隐效果的代码资源。这个压缩包可能是为了帮助开发者了解如何在网页上创建动态、吸引人的视觉效果,特别是在展示重要的标题...

    jquery具有渐隐渐现特效的图片分类特效下载

    在IT行业中,jQuery是一款非常流行的JavaScript库,它简化了JavaScript的使用,特别是在处理网页的DOM操作、...通过理解并应用上述知识点,开发者可以创建出类似或更复杂的jQuery图片特效,提升网站的交互性和吸引力。

    利用jQuery技术实现网页订单弹幕效果特效代码渐隐渐现效果带演示

    "利用jQuery技术实现网页订单弹幕效果特效代码渐隐渐现效果带演示"是一个针对电商网站或购物网站的创新设计,它能让用户在浏览页面时看到实时的订单动态,如“某某购买了什么产品”,这种效果可以增加网站的活跃度和...

    jquery8个很漂亮的特效

    jQuery中的fadeIn()和fadeOut()方法是实现元素渐显渐隐的经典用法。这两个方法接受速度参数,可以控制动画的快慢。通过改变透明度实现平滑过渡,常用于图片轮播或内容切换等场景。 2. **代码2:滑动显示与隐藏(jq...

    jqueryScript 特效 jqueryScript js

    **jQueryScript特效与JavaScript基础** 在网页开发中,jQueryScript是一种基于JavaScript库的特效实现方式,它极大地简化了JavaScript的DOM操作,动画效果以及事件处理等任务,使得开发者能够更高效地创建动态和...

    jquery大号渐入渐出效果特效代码

    例如,以下是一个简单的jQuery渐入渐出效果代码示例: ```javascript $(document).ready(function(){ // 当页面加载完成后,元素将会在1秒内渐入 $("#myElement").hide().fadeIn(1000); // 用户点击某个按钮时...

    jquery_十大特效

    jQuery的FadeIn()和FadeOut()方法可以实现元素的渐显和渐隐效果,通过调整透明度来达到平滑过渡的效果。这两个方法接受速度参数,可以设置动画的执行速度,例如`$("#element").fadeIn("slow")`。 二、滑动显示/隐藏...

    jQuery-菜单渐隐晃动特效

    "jQuery-菜单渐隐晃动特效"是一个专门用于创建动态菜单的JavaScript库,它提供了六种不同的动画效果,可以轻松地添加到你的网站中,使用户界面更加生动有趣。 jQuery是一个广泛使用的JavaScript库,它简化了HTML...

    100个jquery特效

    《100个jQuery特效深度解析》 ...通过深入理解jQuery特效的实现原理,结合插件和最佳实践,我们可以创建出更加动态、互动的网页,提升网站的吸引力和实用性。不断学习和探索,将使你在Web开发的道路上更进一步。

    jquery特效实例打包

    《jQuery特效实例详解与应用深度探索》 在Web开发领域,jQuery库以其强大的功能和简洁的API,成为了JavaScript开发者们的首选工具。本篇文章将围绕"jQuery特效实例打包"这一主题,深入探讨100个精心挑选的jQuery...

    20款jquery网页颤抖摇摆特效.zip

    《jQuery网页颤抖摇摆特效详解》 在网页设计与开发中,动态效果是提升用户体验、增加互动性的重要手段。jQuery,作为一个广泛使用的JavaScript库,以其简洁的API和强大的功能深受开发者喜爱。本篇文章将深入探讨"20...

    jQuery实现渐现渐隐弹出层.zip

    在本文中,我们将深入探讨如何使用jQuery来实现渐现渐隐和上下滑动的弹出层效果。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互,使得创建复杂的网页交互变得更为简单。在这个...

    jquery实现的图片展示特效

    jQuery提供了许多方便的函数,如`.fadeIn()`和`.fadeOut()`来实现图片的渐显渐隐效果,`.slideToggle()`用于滑动切换,`.animate()`可以自定义复杂的动画效果。 `懒人图库.txt`可能是一个简单的文本文件,列出所有...

    jquery实现图片遮罩动画进渡提示特效

    本教程重点讲解如何利用jQuery来实现一个图片遮罩动画过渡提示特效,这在用户交互和界面反馈方面具有很高的实用价值。 首先,我们需要理解“图片遮罩”(Image Masking)的概念。遮罩是覆盖在图片上的一种半透明或...

    jQuery无缝图片渐变切换特效

    最后,动画操作通过`.fadeToggle()`或`.animate()`函数完成图片的渐隐渐现,营造出无缝切换的效果。 接下来,我们关注CSS3的渐变效果。CSS3提供了多种渐变方式,包括线性渐变(linear-gradient)和径向渐变(radial...

    jQuery实现的渐隐渐显焦点图切换特效源码.zip

    【jQuery实现的渐隐渐显焦点图切换特效源码】是一种常见的网页动态效果,它利用JavaScript库jQuery的强大功能,为网站的图片展示区域提供一种吸引用户的交互方式。这种特效允许图片在用户眼前平滑地淡入淡出,创造出...

    Jquery特效之QQ在线客服

    本教程将聚焦于利用jQuery实现的QQ在线客服特效,这可以提升网站用户体验,让访客能更方便地与客服人员进行沟通。 首先,让我们了解一下jQuery的基本概念。jQuery是由John Resig于2006年开发的,它的核心功能包括...

    jquery弹出层特效

    使用animate制作弹出层特效时,我们可以实现渐显、滑入、旋转等丰富的视觉效果,使弹出层的出现和消失更具有吸引力。 以下是利用jQuery和animate实现弹出层特效的基本步骤: 1. **设置HTML结构**:创建一个包含弹...

    jQuery拉幕特效

    jQuery拉幕特效是一种常见的网页动态效果,用于展示信息或者吸引用户注意力。在网页设计中,拉幕效果常常被用于新闻滚动、广告展示或者产品介绍等场景。jQuery库因其丰富的插件和简洁的API,成为实现这类特效的首选...

Global site tag (gtag.js) - Google Analytics