JQuery效果-6.6
来源:互联网 发布:价格水平 知乎 编辑:程序博客网 时间:2024/06/09 14:19
jQuery 效果:对应$(selector).action()的后半部分。
隐藏、显示、切换,滑动,淡入淡出,以及动画
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button#yincang").click(function(){
$("p#id").hide(1000,function(){alert('bye')});
});
});
$(document).ready(function(){
$("button#xian").click(function(){
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button#yincang").click(function(){
$("p#id").hide(1000,function(){alert('bye')});
});
});
$(document).ready(function(){
$("button#xian").click(function(){
$("p#id").show(function(){1000,alert('hello')});
});
});
</script>
</head>
<body>
<button type="button" id='xian'>显示</button>
<button type="button" id='yincang'>隐藏</button>
<p id="id">这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
});
</script>
</head>
<body>
<button type="button" id='xian'>显示</button>
<button type="button" id='yincang'>隐藏</button>
<p id="id">这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$(selector).toggle(speed,callback);
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
阅读全文
0 0
- JQuery效果-6.6
- jQuery 效果
- JQuery效果
- jQuery 效果
- jQuery 效果
- jquery效果
- Jquery效果
- jquery效果
- jQuery效果
- jquery效果
- jQuery-----效果
- jQuery--效果
- jQuery 效果
- JQuery效果
- jquery效果
- jquery效果
- jQuery效果
- jQuery效果
- JQuery事件-6.5
- Codeforces Round #417 (Div. 2)
- MindManager优秀导图分享——数学思维导图
- [转]HBase BlockCache机制讲解&源码分析
- 23种设计模式之命令模式
- JQuery效果-6.6
- 动态www服务器的请求流程原理
- JQuey淡入淡出,滑动方法-6.7
- 设计模式详解——迭代器模式
- Hibernate将HQL语句转换成SQL语句
- 需要获得一组具有相同的ID和name的input的几种尝试
- [js点击]JavaScript之Ajax技术01
- 只给出先序遍历和后序遍历不能唯一确定二叉树的例子
- 【代码笔记】iOS-NSJSONSerializationDemo