jquery 渐入渐出 特效

最新推荐文章于 2024-03-10 18:19:17 发布
最新推荐文章于 2024-03-10 18:19:17 发布
阅读量386 收藏
点赞数
分类专栏： jquery ajax html 文章标签： javascript java ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenweishaoxing/article/details/84414137
版权
jquery 同时被 3 个专栏收录
46 篇文章 0 订阅
订阅专栏
html
43 篇文章 0 订阅
订阅专栏
ajax
36 篇文章 0 订阅
订阅专栏

<%@ 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>

chenweishaoxing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery实例：提示信息渐入渐出的窗口
07-25
这个是非常好用的一个提示信息渐入渐出的JS，用了Jquery类，只需要将Jquery导入即可使用。
jquery大号渐入渐出效果特效代码
03-20
例如，以下是一个简单的jQuery渐入渐出效果代码示例： ```javascript $(document).ready(function(){ // 当页面加载完成后，元素将会在1秒内渐入 $("#myElement").hide().fadeIn(1000); // 用户点击某个按钮时...
jQuery动画：实现渐入渐出
KaiSarH
02-29 1723
jQuery动画实现渐入渐出
jq写一个渐入渐出
wan845199324的博客
06-29 533
css代码： *{ padding:0; margin:0; } #box{ width:100%; height:60px; background:darkred; display
jQuery学习：简单的渐入渐出图片切换
张老师原创开发教程
12-29 4060
jQuery提供了渐入渐出的方法：.fadeIn()和.fadeOut()，利用这两个方法和其他方法，可以实现简单的渐入渐出图片切换动画。
jQuery淡入浅出
热门推荐
nyasm的博客
06-20 2万+
//淡入 $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); //淡出 $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000);
jquery问答式渐隐渐显答案特效代码
01-23
本篇文章将详细讲解如何利用jQuery实现问答式渐隐渐显答案的特效，以及相关的网页模板设计技巧。 首先，我们要了解jQuery的核心概念。jQuery通过一句简单的`$`符号引入，它是一个函数，可以用来选择页面中的元素，...
jquery大号渐入渐出效果.rar
07-04
标题中的“jquery大号渐入渐出效果.rar”指的是一个使用jQuery库实现的大型文本或元素渐显渐隐效果的代码资源。这个压缩包可能是为了帮助开发者了解如何在网页上创建动态、吸引人的视觉效果，特别是在展示重要的标题...
jQuery实现渐现渐隐弹出层特效代码
03-20
在本文中，我们将深入探讨如何使用jQuery来实现渐现渐隐和上下滑动的弹出层特效。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互，使得开发动态网页变得更加容易。在"jQuery实现渐现...
jQuery实现打开页面渐现效果示例
10-21
本文将详细探讨使用jQuery实现页面渐现效果的方法，并结合实例分析其背后的实现技巧。 首先，jQuery库引入了大量操作DOM的便捷方法，以及处理各种DOM事件的接口。而所谓的页面渐现效果，实际上是一种视觉上的动画...
jQuery实现动画、消失、显现、渐出、渐入效果示例
10-18
主要介绍了jQuery实现动画、消失、显现、渐出、渐入效果,结合实例形式分析了jQuery中animate()、hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()等方法简单使用技巧,需要的朋友可以参考下
jQuery实现图片渐入渐出切换展示效果
10-23
主要介绍了jQuery实现图片渐入渐出切换展示效果,需要的朋友可以参考下
jQuery实现鼠标点击弹出渐变层的方法
11-30
弹出层在实际应用中我们经常会碰到大量的弹出层效果，下面我来做一个基于jquery的简单的弹出层效果实例，各位朋友有兴趣可参考。 效果代码如下 在弹出层中下面是核心代码 [removed] // 渐变弹出层 $(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定事件处理 event.stopPropagation(); var offset = $(event.target).offset();//取消事件冒泡
JQ轮播图（单张，渐入渐出）
fffssso的博客
11-08 840
HTML: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src=&
Jquery渐入淡出效果
King-Bond's Space
03-26 1098
Jquery
jQuery动画效果---隐藏/显示，淡入淡出，滑动，动画
最新发布
I_am_shy的博客
03-10 974
jquery可以实现很多流畅的动画效果。可以用 animate() 方法来操作所有 几乎所有的CSS 属性
2021-11-11京剧人物
Yzzyyds666的博客
11-11 713
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; z-index: 0; } body{ .
jQuery的ajax、渐入淡出效果、plugin
Cactus
08-01 1586
ajax　　 这是一个ajax横行的时代。多少人，了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样异常简单 　　代码 　　(1) 　　$.get("search. do",{id:1},rend); 　　function rend
jQuery实现文字渐入效果
weixin_40936348的博客
01-28 585
该文章为个人学习借鉴的总结，主要是为了实现文字渐入的效果，供以后需要时使用。 html: <div class="col-xs-12 py-4 row fade-in-section" data-animation="is-visible"> <p class="col-xs-3 h1 white text-right margin-0 py-2">第一段文字</p> <div clas
星星从背景中飞出特效js
05-02
星星从背景中飞出特效js是一种常见的网页动画效果。该特效利用JavaScript动态控制星星的位置和运动轨迹，使星星能够从背景中“飞”出来，从而增强网页的视觉效果。 一般情况下，实现这种特效需要使用HTML5、CSS3、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值