jquery隐藏显示元素：$('#id').css('display','none');$('#id').hide();

最新推荐文章于 2022-04-01 14:30:55 发布
最新推荐文章于 2022-04-01 14:30:55 发布
阅读量3.3w 收藏 7
点赞数 3
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kungfu_panda/article/details/38554297
版权
方法一：
$( '#id' ).css( 'display' , 'none' );
$( '#id' ).css( 'display' , 'block' );
方法二：
$( '#id' ).hide();
$( '#id' ).show();
kungfu_panda
关注
专栏目录
Web CSS #id 标签选择器 style display 类选择器.class 使用CSS的三种方式 列表装饰 绝对定位
qq_45858803的博客
03-18 1377
文章目录CSS使用的三种方式内联定义方式实现代码实现结果样式块方式实现代码显示结果链入外部样式表文件实现代码图是结果#id 选择器 #id名实现代码实现结果标签选择器 标签名实现代码实现结果类选择器 .类名实现代码图是结果列表装饰实现代码图是结果绝对定位实现代码显示结果 CSS使用的三种方式 内联定义方式 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
$("#id").css("display","none")无效
q765330118的博客
06-21 3878
原因前台框架渲染时覆盖了样式editUser = layer.open({ id    : "editUser", title: "审核用户", type: 1, area: [data.operationtype == 1 &amp;&amp; data.isAudit == 0 ? "950px" : "475px", "600px"],
jquery通过id显示隐藏
weixin_34178244的博客
12-13 4125
2019独角兽企业重金招聘Python工程师标准>>> ...
JQuery应用实例学习 —— 08 显示display:none的隐藏内容
烟敛寒林的博客
09-13 462
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;i
$("#div").html("");,jquery显示和隐藏div特效demo
weixin_29351901的博客
07-09 177
jquery显示和隐藏div特效demo$(document).ready( function(){});function hiden(){$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast}function slideToggle(){$("#divObj").s...
jquery显示隐藏元素的实现代码
11-22
$("#id").css('display','none'); $("#id").css('display','block'); 或  $("#id")[0].style.display = 'none'; $("#id")返回的是JQuery 它是个集合肯定没有display属性 $(“#firstStep”).hide(500);而且可以...
jQuery使用hide方法隐藏页面上指定元素的方法
10-24
当`hide()`方法被执行时，被选中的元素将会被立即隐藏，其CSS属性display值会被设置为none，因此该元素不会显示在页面布局中，也不会占据任何空间。 下面，我们根据提供的内容部分来详细解读如何在页面上使用`hide...
jQuery使用hide方法隐藏元素自身用法实例
12-03
`hide()`方法使得这个按钮在视觉上消失，但请注意，元素并没有从DOM树中移除，只是设置了CSS的`display`属性为`none`，使其不可见。 这个例子展示了如何在实际项目中应用jQuery的`hide()`方法。它不仅适用于按钮，...
jquery 设置style:display的方法
12-02
(“#id”).css(‘display’,’none’); $(“#id”).css(‘display’,’block’); 或 $(“#id”)[0].style.display = ‘none’; $(“#id”)返回的是JQuery 它是个集合肯定有display属性 $(“#id”).show()表示...
jquery控制display属性为none或block
10-26
但需要注意的是，使用.css()方法时，即使元素被隐藏，它在文档流中仍然占据之前的位置，而使用.hide()和.show()方法时，jQuery可能会添加或移除一些CSS类来处理显示和隐藏，这可能会影响元素的位置和样式。...
jQuery
m0_53456432的博客
04-01 1393
一.jQuery概念 jQuery 是一个快速、简洁的 JavaScript 库。j是JavaScript，Query是查询，把js中的DOM进行封装，可以快速查询使用里边的功能，jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。（学习jQuery的本质就是学习调用这些函数（方法）） 1.JavaScript 库 常见的JavaScript 库有jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto，这些库都是对原生
jQuery_css 的详细用法
大脸猫~
06-24 322
一.设置CSS属性 1.给元素设置一个CSS属性： $(&quot;#id&quot;).css('background','black&quot;) 2.如果设置多个属性样式呢？ $(&quot;#id&quot;).css({ 'background':'black&quot;， “font-size”:'14px' }) 3.设置样式,可以根据自己的意愿来设置。 $(&quot;li&quot;).css('font-s
jquery的css样式操作大全
三五月儿的专栏
01-15 1079
$(“#id”).attr(“class”);//获取样式 $(“#id”).attr(“class”,className);//设置样式 $(“#id”).addClass(className);//追加样式 $(“#id”).removeClass(className);//移除样式 $(“#id”).toggleClass(anotherClass) //重复切换anotherClas
js 如何让元素隐藏
热门推荐
fiona_0427的博客
05-19 1万+
一、使用jquery控制div的显示与隐藏： 1.$("#id").show()表示为display：block， $("#id").hide()表示为display:none; 2.$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，则切换为可见的。 二、通过设置元素的属性 $("#id").css('display','none');//隐藏 $("#id").css('display','block');//显示 ...
使用jQuery隐藏标签
SumeriZhanYg
09-28 5845
隐藏： $.("#id").hide();   //不占位隐藏 $.("#id").css("visibility","hidden");   //占位隐藏 出现： //与之对应的 $("#id").show(); $("#id").css("visibility","visible");
细说CSS中的display属性
weixin_30828379的博客
09-25 234
相信大部分奋战在前端的，尤其在前端攻城的过程中，有一种越陷越深的感觉，不错，一如前端深似海，从此妹子是浮云啊，前端上手容易，深入难啊！下面我就CSS中的display属性讲下我自己所积累的，与大家共享下，大神勿喷，我只是路过的。 css中display属性在W3C教程上有简要说明：http://www.w3school.com.cn/cssref/pr_class_display.asp...
jquery控制css的display属性(显示与隐藏)
weixin_30449239的博客
04-26 1052
jquery控制div的显示与隐藏，很方便的。 例如： $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle() //切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 $("#id").css('display','none'); $("#id"...
$().attr() 和 $().css的区别
banjing_1993的博客
03-21 4932
 最近调整前台的时候发现 使用jquery的.attr( )方法去给div隐藏，我是这样写的 $("#div_id").attr("display","none"),发现并没有生效，但是docunment.getElementById("div_id").style("display","none")就生效了。 而且再调试的时候发现，使用$("#div_id").att
$('.back_btn').click(function(){ // ===== From Playlist(3) to Main(2) if($('#curator').css("display") == "none"){ var playlistToMain = new TimelineMax({}); // Hide playlistToMain.fromTo($('#curator'), 0.8, {display: 'none', opacity: 0, scale: 1.1}, {display: 'block', opacity: 1, scale: 1, ease: Power2.easeInOut}, 0) } // From Main(2) to Home(1) else { var mainToHome = new TimelineMax({}); // Hide mainToHome.fromTo($('.curator_title_wrapper'), 0.5, {opacity: 1, x: 0}, {opacity: 0, x: 30, ease: Power2.easeInOut}, 0.2), mainToHome.fromTo($('.curator_list'), 0.5, {opacity: 1, display: 'block', x: 0}, {opacity: 0, x: 30, display: 'none', ease: Power2.easeInOut}, 0.5), mainToHome.to($('.back_btn'), 0.5, {display: 'none', opacity: 0, x: 15, ease: Power2.easeInOut}, 0.5), mainToHome.to($('#curator'), 0, {display: 'none', ease: Power2.easeInOut}, 1), // Background Up mainToHome.to($('.wave-container'), 1, {yPercent: 0, ease: Power2.easeInOut}, 1), // Show mainToHome.to($('.text-wrap'), 0.5, {display: 'flex', opacity: 1, y: 0, ease: Power2.easeInOut}, 1.2), mainToHome.to($('.logo-text, .line'), 0.5, {display: 'block', opacity: 1, y: 0, ease: Power2.easeInOut}, 1.2), // Force to redraw by using y translate mainToHome.fromTo($('.text-wrap .text'), 0.1, {y: 0.1, position: 'absolute'}, {y: 0, position: 'relative', ease: Power2.easeInOut}, 1.3) // $('.text-wrap .text').css('position', 'relative'); } });解释一下
最新发布
06-01
这段代码是一个 jQuery 的事件监听器，当点击类名为 `back_btn` 的元素时，会执行对应的回调函数。在回调函数中，通过判断当前页面是否显示 `curator` 元素，来决定执行 `playlistToMain` 动画序列还是 `mainToHome` 动画序列。下面是对 `mainToHome` 动画序列的详细解释： `mainToHome` 动画序列是一个 `TimelineMax` 实例，它包含了多个动画效果，按照指定的顺序依次播放。 - `fromTo($('.curator_title_wrapper'), 0.5, {opacity: 1, x: 0}, {opacity: 0, x: 30, ease: Power2.easeInOut}, 0.2)`：从 `opacity` 为 1，`x` 为 0 的状态，过渡到 `opacity` 为 0，`x` 为 30 的状态，持续时间为 0.5 秒，缓动函数为 Power2.easeInOut，延迟时间为 0.2 秒。 - `fromTo($('.curator_list'), 0.5, {opacity: 1, display: 'block', x: 0}, {opacity: 0, x: 30, display: 'none', ease: Power2.easeInOut}, 0.5)`：从 `opacity` 为 1，`display` 为 block，`x` 为 0 的状态，过渡到 `opacity` 为 0，`display` 为 none，`x` 为 30 的状态，持续时间为 0.5 秒，缓动函数为 Power2.easeInOut，延迟时间为 0.5 秒。 - `to($('.back_btn'), 0.5, {display: 'none', opacity: 0, x: 15, ease: Power2.easeInOut}, 0.5)`：将类名为 `back_btn` 的元素的 `display` 设置为 none，`opacity` 设置为 0，`x` 设置为 15，持续时间为 0.5 秒，缓动函数为 Power2.easeInOut，延迟时间为 0.5 秒。 - `to($('#curator'), 0, {display: 'none', ease: Power2.easeInOut}, 1)`：将 `#curator` 元素的 `display` 设置为 none，持续时间为 0 秒，缓动函数为 Power2.easeInOut，延迟时间为 1 秒。 - `to($('.wave-container'), 1, {yPercent: 0, ease: Power2.easeInOut}, 1)`：将类名为 `wave-container` 的元素的 `y` 百分比值设置为 0，持续时间为 1 秒，缓动函数为 Power2.easeInOut，延迟时间为 1 秒。 - `to($('.text-wrap'), 0.5, {display: 'flex', opacity: 1, y: 0, ease: Power2.easeInOut}, 1.2)`：将类名为 `text-wrap` 的元素的 `display` 设置为 flex，`opacity` 设置为 1，`y` 设置为 0，持续时间为 0.5 秒，缓动函数为 Power2.easeInOut，延迟时间为 1.2 秒。 - `to($('.logo-text, .line'), 0.5, {display: 'block', opacity: 1, y: 0, ease: Power2.easeInOut}, 1.2)`：将类名为 `logo-text` 或 `line` 的元素的 `display` 设置为 block，`opacity` 设置为 1，`y` 设置为 0，持续时间为 0.5 秒，缓动函数为 Power2.easeInOut，延迟时间为 1.2 秒。 - `fromTo($('.text-wrap .text'), 0.1, {y: 0.1, position: 'absolute'}, {y: 0, position: 'relative', ease: Power2.easeInOut}, 1.3)`：从 `y` 为 0.1，`position` 为 absolute 的状态，过渡到 `y` 为 0，`position` 为 relative 的状态，持续时间为 0.1 秒，缓动函数为 Power2.easeInOut，延迟时间为 1.3 秒。 最后，通过 `play` 方法启动动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值