<!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. NSLayoutConstraint-代码实现自己主动布局的函数使用方法说明

    [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelat ...

  2. 最简单的基于FFMPEG的封装格式转换器（无编解码）

    本文介绍一个基于FFMPEG的封装格式转换器.所谓的封装格式转换,就是在AVI,FLV,MKV,MP4这些格式之间转换(相应.avi,.flv,.mkv,.mp4文件).须要注意的是,本程序并不进行视 ...

  3. chrome下老是弹出网页显示 true

    事实上这个问题是chrome下安装了一些插件的原因,一般来说是安装迅雷插件会出现这个问题,删除迅雷插件就好了.

  4. xcode6下使用autolayout+sizeclass实践

    历史车轮滚滚向前,将autolayout配合sizeclass做布局的方式推上了主流,虽然有点晚,但最终还是进行了一次完整的实践,特此记录一下: 因为网上已经有很多博客介绍了autolayout配合s ...

  5. spring core源码解读之ASM4用户手册翻译之一asm简介

    第一章:ASM介绍 1.1 ASM动机: 程序的分析,生成,转换技术可以应用到许多场景: 1.程序分析,从简单的语法解析到完整的语义分析,可以应用在程序中找到潜在的bug,发现无用的代码,工程代码的逆 ...

  6. Apache Kafka: Next Generation Distributed Messaging System---reference

    Introduction Apache Kafka is a distributed publish-subscribe messaging system. It was originally dev ...

  7. Windows2012中安装PHP-5.6.20+Apache httpd2.4.18+Composer+Laravel+MySQL5.7

    下载软件包 PHP:  http://windows.php.net/downloads/releases/php-5.6.20-Win32-VC11-x64.zip Apache httpd:  h ...

  8. Eclipse - 安装 run-jetty-run 插件及使用 jrebel 热部署

    安装 run-jetty-run 插件 1. 下载 run-jetty-run 2. 解压至 Eclipse/MyEclipse 安装目录下的 plugin 3. 右键 web 项工程,选择 Run ...

  9. SQL 建立临时表进行查询

    SELECT min (maxrank) as minofmaxrank FROM (SELECT max(rank) as maxrank FROM tbl_core_staff WHERE st_ ...

  10. Android eclipse - aapt.exe has stopped working.

    今天在修改Android的布局文件的时候,发现每保存一次,就提示: aapt.exe has stopped working(appt.exe已停止工作).很是郁闷,当时Android控制台已经提示错 ...