<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<head>

<!--引入百度库-->

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<title></title>

<script>

$(document).ready(function(){

$("button").click(function(){

/* $("#mm").fadeToggle();

$("#cc").fadeToggle();   */

$("#mm").slideToggle("slow")  // id #  滑动淡入淡出

$("#cc").slideToggle("fast");

});

});

</script>

</head>

<body>

<button style=" height: 30px; width: 100px;">Start Animation</button>

<div  id="mm" style="background:#98bf21;height:100px;width:100px;">

</div>

<div id="cc" style="background-color: burlywood; height: 100px; width:100px;"> </div>

</body>

</html>

jquery 滑动动画的更多相关文章

  1. jQuery实用小技巧-获取选中的的下拉框和返回头部滑动动画

    //获取选中的下拉框 $('#someElement').find('option:selected'); $('#someElement option:selected'); //返回头部滑动动画 ...

  2. 利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  3. jQuery 代码的层定位滑动动画效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 【Web】利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  5. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  6. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  7. jQuery的动画效果

    jQuery 是一个 JavaScript 库.jQuery 库可以通过一行简单的标记被添加到网页中. <script type="text/javascript" src= ...

  8. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  9. FlexSlider是一个非常出色的jQuery滑动切换插件

    FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...

随机推荐

  1. Android开发_Android数据的四种存储方式

    Android系统一共提供了四种数据存储方式.分别是:SharePreference.SQLite.Content Provider和File.由于Android系统中,数据基本都是私有的的,都是存放 ...

  2. NVMe 图解

    http://www.ssdfans.com/?p=1143#rd&sukey=3997c0719f151520989740bb972a716fdb2dbab623808d16acd5075b ...

  3. 精《记叙“tom”4年的软件开发之旅》

    1.引言 本篇文章是记叙tom四年的软件开发从业经历,虽然他资历不长,况且本身也是个菜鸟,但他也曾有过荣誉.迷茫.困惑与选择,在这里他希望通过自己所经历过的事情分享给大家,给那些真正热爱软件开发的同学 ...

  4. WS_CLIPCHILDREN和WS_CLIPSIBLINGS的理解(转载)

    1.1 WS_CLIPCHILDREN WS_CLIPCHILDREN样式从字面上可以理解成ClipChildren,裁减子窗口. MSDN里的E文解释:Excludes the area occup ...

  5. ASP.NET操作DataTable

    .创建 datatable DataTable dt=new Datable();//可以给表创建一个名字,tb .给表加个列名: dt.Columns.Add("id", typ ...

  6. readonly时禁用删除键，readonly按删除键后页面后退解决方案

    readonly时禁用删除键, readonly按删除键后页面后退解决方案 >>>>>>>>>>>>>>>&g ...

  7. HTML+CSS基础学习笔记（3）

    一.提交按钮.重置按钮 1.type="submit" 提交按钮 2.type="reset"   重置按钮 二.form表单中的label标签 格式: < ...

  8. Spring中事务的5种属性总结

    Sping的事务 和 数据库的事务是不同的概念,数据库的事务一般称为底层事务 Spring的事务是对这种事务的抽象 我称之为逻辑事务 Spring对事务的功能进行了扩展,除了基本的Isolation之 ...

  9. (转)C# NameValueCollection集合

    1.NameValueCollection类集合是基于 NameObjectCollectionBase 类. 但与 NameObjectCollectionBase 不同,该类在一个键下存储多个字符 ...

  10. python基础知识五

    数据结构基本上就是---它们可以处理一些数据的结构.或者说,它们是用来存储一组相关数据的. python中有三种内建的数据结构---列表.元祖和字典. 我们将会学习如何使用它们,以及它们如何使编程变得 ...