jQuery学习-显示与隐藏

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>显示与隐藏</title><script src="js/jquery.js"></script><style>.me{ position: absolute;left: 50%;top: 50%;margin-left: -200px;margin-top: -75;width: 400px;height: 100px;background-color: orange;overflow: auto;padding: 10px;}</style><script type="text/javascript">    //页面加载完成简写形式
            $(function(){//其他动画效果  slideUp slideDown 拉窗帘//fadeOut fadeIn 渐出 渐入效果
                $("#toggle").on("click",function(){if($(".me").css("display")=="none"){//$(".me").css("display","block");//显示$(".me").show(1000); //动画显示 元素
                }else{//$(".me").css("display","none");//隐藏$(".me").hide(1000,function(){alert("我隐藏起了!")});//动画隐藏 元素 第二个参数 在执行完隐藏后执行
                }});})</script><body><button id="toggle">显示/隐藏</button><div class="me"></div></body>
</html>

转载于:https://www.cnblogs.com/whzym111/p/6072818.html

jQuery学习-显示与隐藏相关推荐

jQuery 实现显示与隐藏效果
本节我们来学习如何使用 jQuery 中的方法来实现元素的显示与隐藏效. hide()方法 hide() 方法用于隐藏指定的元素,与 CSS 中的 display:none 效果类似. 语法如下所示: ...
jQuery的显示与隐藏
显示.隐藏 // show() $("#show").click(function(){$("p").show(); });// hide() $(" ...
jQuery的显示和隐藏
在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏例子: 1 < ...
html中元素的隐藏，以及用jquery来显示和隐藏元素
添加一个属性:style="display:none;" <td id="tdTest" style="display:none;"& ...
【JavaWeb】JQuery实现广告显示和隐藏动画效果
我们经常会看到几秒后出现了广告,显示了几秒后广告就消失了,下面就用JQuery框架来实现这个功能. 代码如下: <!DOCTYPE html> <html> <head& ...
JavaWeb12_JQuery_广告的自动显示与隐藏
使用目录查看更佳! JQuery学习 JQuery基础概念一个JavaScript框架.简化JS开发 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的 ...
jquery 学习笔记及小练习
jQuery 1.简介 JQuery是js函数库本质就是js库 jQuery总共有三个版本 1版本兼容性最好 2 版本3版本轻量化 jquery 核心函数 <!-- 1. 作为一般函数调用: ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
[JQuery 学习笔记] 隐藏和显示 hide() 和 show()
hide() 和 show() 方法 <!DOCTYPE html> <html lang="en"> <head><meta char ...

jQuery学习-显示与隐藏

jQuery学习-显示与隐藏相关推荐

最新文章

热门文章