toggleClass slideToggle
$("#wrapper").toggleClass("toggled");
$("p").slideToggle(1000);
demo:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="./jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".mybutton").click(function(){
$(".notice").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.notice
{
height:320px;
background:#e5eecc;
padding-left: 250px;
display:none;
}
</style>
</head>
<body>
<p>
<div class="notice">
<h1>wellcome</h1>
<p>how to show slideToggle</p>
<p>canyoushowit</p>
</div>
<button class="mybutton"> click me</button>
</body>
</html>
toggleClass slideToggle的更多相关文章
- jQuery基础 浅析（含基本方法和选择器）
1.jQuery与DOM互相转换 jQuery入库函数:$(document).ready(function(){}) $(function(){}) $(“#btn”):jQuery存储的是DOM对 ...
- 原生JavaScript实现hasClass、addClass、removeClass、toggleClass
兼容IE6+,因IE6.IE7.IE8不支持Array.prototype.indexOf()和String.prototype.trim(),分别用Polyfill实现支持. 详细: indexOf ...
- angularjs与jquery特效slidetoggle结合
之前使用jquery的slidetoggle方法,可以轻易的实现元素的收缩展开:使用angularjs后,没有找到相关的方法,通过多方面查资料,自己写了个demo,展示slidetoggle的angu ...
- jQuery知识点一 each()和toggleClass()
jQuery的一些东东比较容易忘,所以在这里整理一下... ... 1. each (1) $(selector).each(function(index,element)) inde ...
- jquery之toggleClass应用
今天记载一下常用的html + css + jquery效果应用 1.html内容 <div class="selBtn screen_btn"> <a id=& ...
- js实现css、addClass、removeClass和toggleClass
JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象 ...
- addClass, removeClass, toggleClass（从jquery中抠出来）
<div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...
- addClass() 和 toggleClass()
addClass()是在原有的类基础上增加类属性,仍然保留原有的类的样式.语法格式为:addClass(class0 class1 ...) ,例如: $("p").addClas ...
- jquery实现页面动态切换的方法--toggleClass(className)
$(function() { $(".A").click(function() { $(this).toggleClass("B"); }); }); 当点击带 ...
随机推荐
- vue-lazyload插件
更详细的内容,请移步 使用 npm install vue-lazyload --save //注册插件 import vueLazyload from 'vue-lazyload' Vue.use( ...
- 紫书 习题8-14 UVa 1616（二分+小数化分数+精度）
参考了https://www.cnblogs.com/dwtfukgv/p/5645446.html (1)直接二分答案.说实话我没有想到, 一开始以为是贪心, 以某种策略能得到最优解. 但是想了很久 ...
- HDU——T 2444 The Accomodation of Students
http://acm.hdu.edu.cn/showproblem.php?pid=2444 Time Limit: 5000/1000 MS (Java/Others) Memory Limi ...
- Unix发展史
简述 了解过去,我们才能知其然,更知所以然.总结过去,我们才会知道明天该何去何从.在时间的滚轮中,许许多多的东西就像流星一样一闪而逝,而有些东西却能经受着时间的考验散发着经久的魅力,让人津津乐道.流传 ...
- Qt资料大全
简述 发福利了.发福利了.发福利了,重要的事情说三遍... 为了方便更多Qter了解.学习Qt,现将相关资源进行整理,主要内容包括:Qt官网.编码风格.GitHub & Third-Party ...
- layDate1.0正式公布，您一直在寻找的的js日期控件
你是时候换一款日期控件了,而layDate很愿意和您成为工作伙伴.她正致力于成为全球最高大上的web日期支撑,为国内外全部从事web应用开发的同仁提供力所能及的动力.她基于原生JavaScript精心 ...
- [Angular] Configure an Angular App at Runtime
It always again happens (especially in real world scenarios) that you need to configure your Angular ...
- Android5.0以上系统的移动网络开关
笔者近期遇到一个非常有意思的bug,贴出来和大家分享下. 那是一个温暖的早晨,阳光晒得人非常舒服.一封bug邮件像一片叶子飘到我的邮箱. 一番交流.笔者确认负责的Widget开关在Android5.0 ...
- less10 loop循环
less .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // 递归调用自身 4 3 2 1 0 width: (10p ...
- Excel操作之VLOOKUP
https://support.office.com/en-us/article/VLOOKUP-function-0bbc8083-26fe-4963-8ab8-93a18ad188a1 Use V ...