JQuery实现隐藏和显示动画效果

本文为大家分享了JQuery实现隐藏和显示动画效果的具体代码,供大家参考,具体内容如下

隐藏和显示

语法

  • $(selector).fadeIn([speed,callback]);
  • $(selector).fadeOut([speed,callback]);
  • $(selector).fadeToggle([speed,callback]);

参数说明:

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实现代码

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>文档处理</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <style>
   div {
    background: lightblue;
    padding: 20px;
   }

   p {
    background: lavenderblush;
    padding: 20px;
   }
  </style>
  <script>
   $(function() {
    $("#btnHide").click(function() {
     //$("div").hide();
     //$("div").hide(2000);
     $("div").hide(2000, function() {
      alert("隐藏完成!");
     });
    });
    $("#btnShow").click(function() {
     //$("div").show();
     //$("div").show(2000);
     $("div").show(2000, function() {
      alert("显示完成!");
     });
    });
    $("#btnToggle").click(function() {
     //$("p").toggle();
     //$("p").toggle(2000);
     $("p").toggle(2000, function() {
      alert("切换完成!");
     });
    });
   });
  </script>
 </head>

 <body>
  <button id="btnHide">隐藏-div</button>
  <button id="btnShow">显示-div</button>
  <button id="btnToggle">切换显示和隐藏-p</button>
  <div>div1</div>
  <br/>
  <div>div2</div>
  <p style="display: none;">p1</p>
  <p>p2</p>
 </body>

</html>

效果展示

隐藏效果展示

显示效果展示

切换显示和隐藏

从P1切换成了P2

淡入和淡出

语法

  • $(selector).fadeIn([speed,callback]);
  • $(selector).fadeOut([speed,callback]);
  • $(selector).fadeToggle([speed,callback]);

参数说明:

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实现代码

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>效果</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <style>
   div {
    background: lightblue;
    padding: 20px;
   }

   p {
    background: lavenderblush;
    padding: 20px;
   }
  </style>
  <script>
   $(function() {
    $("#btnIn").click(function() {
     //$("div").fadeIn();
     //$("div").fadeIn(2000);
     $("div").fadeIn(2000, function() {
      alert("淡入完成!");
     });
    });
    $("#btnOut").click(function() {
     //$("div").fadeOut();
     //$("div").fadeOut(2000);
     $("div").fadeOut(2000, function() {
      alert("淡出完成!");
     });
    });
    $("#btnToggle").click(function() {
     //$("p").fadeToggle();
     //$("p").fadeToggle(2000);
     $("p").fadeToggle(2000, function() {
      alert("切换完成!");
     });
    });
   });
  </script>
 </head>

 <body>
  <button id="btnIn">淡入-div</button>
  <button id="btnOut">淡出-div</button>
  <button id="btnToggle">切换淡入淡出-P</button>
  <div>div1</div>
  <br/>
  <div>div2</div>
  <p style="display: none;">p1</p>
  <p>p2</p>
 </body>

</html>

效果与隐藏和显示相差不大

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-09-14

jquery和js实现对div的隐藏和显示方法

jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi

jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参

input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态:  输入框获取焦点状态:  大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l

Jquery 点击按钮显示和隐藏层的代码

代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"

jQuery动态显示和隐藏datagrid中的某一列的方法

复制代码 代码如下: $(function(){ $('#tt').datagrid({ title:'报表统计', width:1020, height:400, url:'', fitColumns:true, loadMsg:'正在获取,请稍侯...', singleSelect:true, nowrap:false, columns:[[ {field:'REGION_NAME',title:'分公司',width:30,align:'center'}, {field:'COUNTY_N

Jquery实现显示和隐藏的4种简单方式

Html代码: 复制代码 代码如下: <div class="topicList"> <h3><span>学习天地</span></h3> <ul> <li>1111111111</li> <li>2222222222</li> <li>333333333</li> <li>4444444444</li> <li&

jQuery控制TR显示隐藏的三种常用方法

网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: <table> <tr><td>这行不隐藏</td></tr> <tr id="tr_1"><td>这行要隐藏</td></tr> <tr id="tr_2"><td>这行要隐藏</td>

jquery显示隐藏input对象

1 所属部门选择其他时 显示一个输入框进行填写 #html <select id='deptid' name='deptid' class="select" onchange='deptChange()'> <c:forEach var="item" items="${deptidList}" varStatus="status"> <option value='${item.value}'>

JQuery显示、隐藏div的几种方法简明总结

例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

jQuery控制TR显示隐藏的几种方法

网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: 这行不隐藏 这行要隐藏 这行要隐藏 那么控制显隐可以直接使用 for(var i = 1; i < tr_len; i++){ //tr_len是要控制的tr个数 $("#tr_"+i).hide(); } 第二种方法,是使用$.each(),这个方法需要设置table的id,如下: 这行不隐藏 这行要隐藏 这行要隐藏 那么控制显隐可以直接使

JS控制HTML元素的显示和隐藏的两种方法

利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

Jquery中ajax提交表单几种方法(get、post两种方法)

在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

解析Jquery取得iframe中元素的几种方法

DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.documentjquery方法:在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text");在IFRAME中操作 选中父窗口中的所有输入框:$(window.parent.document).

jQuery页面加载初始化的3种方法(推荐)

jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(function(){ alert("第一种方法."); }); 第二种: $(function(){ alert("第二种方法."); });  第三种: jQuery(function($) { alert("第三种方法."); }); ps; 不用jQuer

Android ListView自动显示隐藏布局的实现方法

借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示隐藏Toolbar 首先给listView增加一个HeaderView,避免第一个Item被Toolbar遮挡. View header=new View(this); header.setLayoutParams(new AbsListView.LayoutParams( AbsListView.

解决EditText不显示光标的三种方法(总结)

解决方法有以下3种 1.在Edittext中加入以下属性 android:cursorVisible="true" android:textCursorDrawable="@null" 2.在Edittext中加入以下属性 android:cursorVisible="true" android:textCursorDrawable="@drawable/test_cursor" 对应的drawable文件 <?xml

jQuery控制frames及frame页面JS的方法

本文实例讲述了jQuery控制frames及frame页面JS的方法.分享给大家供大家参考,具体如下: <script src="jquery-1.3.2.min.js" type="text/javascript" ></script> <script> var _intervalx,steplengthx steplengthx=1000; //第一次触发时间 nextstepx=10000 ; //以后的触发时间 $(doc

jQuery+ajax实现局部刷新的两种方法

在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(). 第一种: 当某几个页面都有相同的头部.导航.底部的时候,点击导航链接可以在几个页面中切换,此时想要的效果是点击链接后只切换内容部分,其他不再重新加载.上代码. jq-load.html: <!DOCTYPE html> <html> <head> <title>ajax局部刷新</title> </h