$("#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的更多相关文章

  1. jQuery基础 浅析(含基本方法和选择器)

    1.jQuery与DOM互相转换 jQuery入库函数:$(document).ready(function(){}) $(function(){}) $(“#btn”):jQuery存储的是DOM对 ...

  2. 原生JavaScript实现hasClass、addClass、removeClass、toggleClass

    兼容IE6+,因IE6.IE7.IE8不支持Array.prototype.indexOf()和String.prototype.trim(),分别用Polyfill实现支持. 详细: indexOf ...

  3. angularjs与jquery特效slidetoggle结合

    之前使用jquery的slidetoggle方法,可以轻易的实现元素的收缩展开:使用angularjs后,没有找到相关的方法,通过多方面查资料,自己写了个demo,展示slidetoggle的angu ...

  4. jQuery知识点一 each()和toggleClass()

    jQuery的一些东东比较容易忘,所以在这里整理一下... ... 1. each (1) $(selector).each(function(index,element))         inde ...

  5. jquery之toggleClass应用

    今天记载一下常用的html + css + jquery效果应用 1.html内容 <div class="selBtn screen_btn"> <a id=& ...

  6. js实现css、addClass、removeClass和toggleClass

    JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象 ...

  7. addClass, removeClass, toggleClass(从jquery中抠出来)

    <div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...

  8. addClass() 和 toggleClass()

    addClass()是在原有的类基础上增加类属性,仍然保留原有的类的样式.语法格式为:addClass(class0 class1 ...) ,例如: $("p").addClas ...

  9. jquery实现页面动态切换的方法--toggleClass(className)

    $(function() { $(".A").click(function() { $(this).toggleClass("B"); }); }); 当点击带 ...

随机推荐

  1. vue-lazyload插件

    更详细的内容,请移步 使用 npm install vue-lazyload --save //注册插件 import vueLazyload from 'vue-lazyload' Vue.use( ...

  2. 紫书 习题8-14 UVa 1616(二分+小数化分数+精度)

    参考了https://www.cnblogs.com/dwtfukgv/p/5645446.html (1)直接二分答案.说实话我没有想到, 一开始以为是贪心, 以某种策略能得到最优解. 但是想了很久 ...

  3. 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 ...

  4. Unix发展史

    简述 了解过去,我们才能知其然,更知所以然.总结过去,我们才会知道明天该何去何从.在时间的滚轮中,许许多多的东西就像流星一样一闪而逝,而有些东西却能经受着时间的考验散发着经久的魅力,让人津津乐道.流传 ...

  5. Qt资料大全

    简述 发福利了.发福利了.发福利了,重要的事情说三遍... 为了方便更多Qter了解.学习Qt,现将相关资源进行整理,主要内容包括:Qt官网.编码风格.GitHub & Third-Party ...

  6. layDate1.0正式公布,您一直在寻找的的js日期控件

    你是时候换一款日期控件了,而layDate很愿意和您成为工作伙伴.她正致力于成为全球最高大上的web日期支撑,为国内外全部从事web应用开发的同仁提供力所能及的动力.她基于原生JavaScript精心 ...

  7. [Angular] Configure an Angular App at Runtime

    It always again happens (especially in real world scenarios) that you need to configure your Angular ...

  8. Android5.0以上系统的移动网络开关

    笔者近期遇到一个非常有意思的bug,贴出来和大家分享下. 那是一个温暖的早晨,阳光晒得人非常舒服.一封bug邮件像一片叶子飘到我的邮箱. 一番交流.笔者确认负责的Widget开关在Android5.0 ...

  9. less10 loop循环

    less .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // 递归调用自身 4 3 2 1 0 width: (10p ...

  10. Excel操作之VLOOKUP

    https://support.office.com/en-us/article/VLOOKUP-function-0bbc8083-26fe-4963-8ab8-93a18ad188a1 Use V ...