<!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. Jmeter聚合报告分析

    Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Name 属性,这里显示的就是 Name 属性的值 Average:平均响应时间--默认情况下是单个 Re ...

  2. 【Android XMPP】 学习资料收集贴（持续更新）

    系列一: 基于xmpp openfire smack开发之openfire介绍和部署[1] 基于xmpp openfire smack开发之smack类库介绍和使用[2] 基于xmpp openfir ...

  3. [Webpack 2] Tree shaking with Webpack 2

    The less code you can send to the browser, the better. The concept of tree shaking basically says th ...

  4. android Camera拍照 及 MediaRecorder录像 预览图像差90度

    Camera拍照: 今天做照相机程序,结果写好了发现出问题了,预览的图像差90度.相关源代码如下: Camera.Parameters params = camera.getParameters(); ...

  5. classpath多个包添加

    转的: 把某目录下的所有子目录和子目录下面的下层和更下层目录也添加到CLASSPATH里面,更具需求写了两句,发上来分享,备忘. 在Linux下可以通过这样的方法把/opt/.../lib目录下的所有 ...

  6. PureMVC(JS版）源码解析（七）：Mediator类

    之前的博文中,我们分析了SimpleCommand类和MacroCommand类,这两个类用作"业务逻辑(business logic)"处理,今天,我们讲一些和UI界面相关联的M ...

  7. Freemarker学习中遇到的问题

    在网上找到了尚学堂的视频,同时有书和源码等资料.但是在跟着练习的过程中,代码运行报了错: 2015-7-20 22:26:40 freemarker.log.JDK14LoggerFactory$JD ...

  8. ASP.NET中如何实现负载均衡

    ASP.NET站点中做负载均衡: 基于HTTP协议我们可能发现我们要解决两点问题: 第一,做到负载均衡,我们需要一个负载均衡器. 可以通过DNS轮询来做,在DNS服务器上配置为每次对我们做负载均衡的同 ...

  9. 在用VS2010连接oracle数据库时ORA-12504错误

    在用VS2010连接oracle数据库时,可能会出现: ORA-12504: TNS: 监听程序在 CONNECT_DATA 中未获得 SERVICE_NAME 只需在web.config文件Data ...

  10. [转]eclipse github 提交代码

    1 git add2 git commit3 git pull  (会产生冲突) 分成自动合并和手动合并4 处理冲突的文件 5 git push 本次commit 我用的是Eclipse的插件EGit ...