jQuery显示隐藏

jQuery里的显示隐藏与JavaScript里面是不一样的，使用的方法是不一样的。

先给两个按钮，一个是显示一个隐藏，然后给它们做点击事件，然后给一个盒子做显示隐藏的时候可以看效果。

代码：

<!DOCTYPE html>

<head>

<title>键盘按下换背景色</title>

<style>

div{

width:200px;

height:100px;

background:rgb(255, 206, 127);

}

</style>

</head>

<body>

</body>

</html>

效果图：

解析：先给两个button按钮，一个是显示一个是隐藏，可以不用给样式。在给一个盒子或者多个盒子，给宽高背景颜色，这里的这个盒子宽是200像素，高是100像素。背景颜色为rgb(255, 206, 127)。

下一步要写按钮的点击事件，用jQuery方法来写，需要引入插件。

代码：

引入jQuery插件之后就可以给按钮写点击事件了

代码：

<body>

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

$("div").slideDown(1000);

})

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

$("div").slideUp(1000);

})

</script>

</body>

效果图：

隐藏：

显示：

解析：点击隐藏按钮，这个div盒子就会向上收缩，知道高的像素为零。点击显示，这个div盒子就会向下放知道恢复到我们给元素设置的高度，向上收隐藏可以使用slideUp（）方法，向下放显示可以使用slideDown（）方法。

有一种是用透明度的方法去显示隐藏盒子

代码：

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

$("div").fadeIn(1000);

})

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

$("div").fadeOut(1000);

})

</script>

效果图：

解析：点击显示和隐藏按钮，div盒子的透明度就会从零到一或者一到零，中间有一秒的过度事件这个过度事件也可以自己设置，透明度从零到一可以使用fadeIn（）方法，透明度从一到零可以使用fadeOut（）方法。

jQuery显示隐藏相关推荐

jquery显示隐藏切换_jQuery显示，隐藏，切换
jquery显示隐藏切换 Earlier we looked into how we can use jQuery get attribute, today we will look into thr ...
原生js与jQuery显示隐藏div的几种方法
原生Js与jQuery显示隐藏div的几种方法简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行js演示和讲解. 首先是display的方法 ...
JS jQuery显示隐藏div的几种方法
<div id="demo">AAA</div> JS隐藏和显示div的方式有两种: 方式1:隐藏后释放占用的页面空间通过设置display属性可以使di ...
jquery显示隐藏元素
$("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id&q ...
html查看更多隐藏内容,jQuery点击显示隐藏更多文字内容插件jquery.morecontent.js
插件描述:这是一款jQuery显示隐藏更多文字内容插件.该插件可以将很长的一段文字按要求进行部分隐藏和全部展示,并且可以定制隐藏和展开内容时的动画效果. jquery.morecontent.js 这 ...
jQuery的几种显示隐藏方法
jQuery显示隐藏方法 hide()方法元素隐藏,隐藏的前提必须是元素display:block: show()方法元素显示,显示的前提必须是元素display:none; toggle()方法 ...
jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法
jQuery能够简单快捷的实现很多功能,因此在前端开发中被广泛使用,正在学习jQuery的小伙伴,你会用jQuery实现点击显示再次点击隐藏的效果吗(即jQuery二次点击隐藏)?这篇文章就和大家讲讲 ...
隐藏导航条HTML,jQuery实现的导航条切换可显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: 导航条在项目中的应用 $(function(){ ...

jQuery显示隐藏

jQuery显示隐藏相关推荐

最新文章

热门文章