<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery.1.11.1.min.js"></script>

<style type="text/css">

     #box{

         width: 100px;

         height: 100px;

         background: red;

         display: none;

      }

</style>

</head>

<body>

　　

//Jquery动画设置所有方法如下

    show() :显示  display->block

      hide()  隐藏  display->none

      toggle()  切换显示和隐藏

      slideDown()  向下滑动  改变display和高度（参数为毫秒，滑动时间）

      slideUp()    向上滑动  改变display和高度

      slideToggle()  切换上下滑动

      fadeIn()     淡入   opacity->1 

      fadeOut()    淡淡入出   opacity->0

      fadeTo()      改变透明度

      fadeToggle()  切换淡入淡出   

      animate()     自定义动画

      stop()         停在当前位置

      finish()       终止动画，停在最终位置

      delay()       设置延迟

　//html代码

  <button>显示隐藏</button>

   <button>结束</button>

   <button>停止</button>

   <div id="box"></div>

<script type="text/javascript">

　　//例子

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

         $("#box").show();        //第一个按钮点击的时候，div元素从隐藏的状态显示出来

      });

 

      $("button").eq(0).mouseover(function(){

         $("#box").show();        //鼠标放到第一个按钮的时候，div元素从隐藏的状态显示出来  

      }).mouseout(function(){

         $("#box").hide();        //鼠标移开时，div元素从显示状态隐藏起来

      });     

 

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

         $("#box").toggle();         //第一个按钮点击的时候，div元素从显示状态隐藏起来

      });

 

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

         //$("#box").slideDown(1000);         //向下的滑动时间是1秒

         $("#box").slideToggle();          //切换上下滑动     

      });

 

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

 

          $("#box").fadeIn(2000);       //淡入时间为2秒,淡入的意思是显示出来时间

          //$("#box").fadeOut(2000);

           $("#box").fadeToggle(2000);     //淡入淡出

         //$("#box").fadeTo(2000,0.9);        //改变透明度

 

      });

 

      $("#box").css("display","block");

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

         $("#box").delay(2000).animate({         //第一个按钮点击的时候，div元素将再2秒后飘逸，

            "margin-left":"200px",

            "margin-top":"200px"

         },2000);                       //这个时间是指整个过程的持续时间

      });

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

         $("#box").finish();                  //第二个按钮点击的时候，运动中的动画立刻停在结束位置

      });

 

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

         $("#box").stop();                 //第三个按钮点击的时候，正在运动中的动画立刻停止当前位置

      });

　　//部分网页显示效果

　　

</script>

</body>

</html>

Jquery动画效果设置大全的更多相关文章

  1. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  2. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  3. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  4. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

  5. jQuery自学笔记（三）：jQuery动画效果

    jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...

  6. 一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏

    jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画 ...

  7. jquery动画效果总结

    一.jquery的动画速度fast-slow对应着600ms,200ms,不写是400ms 二.禁用jquery的动画 将jQuery.fx.off设置为true即可 $(".stoppin ...

  8. python 全栈开发，Day53(jQuery的介绍，jQuery的选择器，jQuery动画效果)

    01-jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  9. jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

随机推荐

  1. Java 中序列化与反序列化引发的思考？

    java 中序列化指从对象转变为 二进制流的过程中需要进行序列化,而反序列化指二进制流转换为java 对象.那么有的时候java 存储到数据库不需要序列化, 而计算机系统本质存储的就是二进制文件,数据 ...

  2. js指定范围指定个数的不重复随机数

    今天偶然看到的 比如要生成 1-100范围之内的10个不重复随机数,代码就可以这么写 var arr = []; for (var i = 1; i <=100; i++) { arr.push ...

  3. Python学习第二十四课——Mysql 外键约束

    外键:主要是关联两个表的 举个栗子:在建表中创建外键 -- 添加外键例子 CREATE TABLE teacher( id TINYINT PRIMARY KEY auto_increment, na ...

  4. pip-9.0.1更新到pip-10.0.1遇到的问题

    使用 pip 安装第三方库时,报错: You are using pip version 9.0.3, however version 10.0.1 is available. You should ...

  5. AF（操作者框架）系列（1）-LabVIEW中的模块化应用概述

    一.引子 在前面对LabVIEW介绍的文章中,关于框架开发的内容涉及很少.为了讲解操作者框架(Actor Framework)的优缺点,也只是拿出来QDSM(Queue-Driven State Ma ...

  6. Lucene的初步了解和学习

    Lucene的学习一,什么是全文检索 1.数据的分类 1.结构化数据 格式固定,长度固定,数据类型固定. 例如:数据库中的数据: 2.非结构化数据 word文档,pdf文档,邮件,html,txt 格 ...

  7. Python数据类型-1 数据类型介绍

    数据类型 在python这门语言中,数据类型分为两种. 内置的和自定义的. 内置的包括数字.字符串.布尔.列表.元组.字典.Bytes.集合这些常用的以及一些不太常用的数据类型.而自定义的,一般以类的 ...

  8. Linux内核5.4正式将华为EROFS超级文件系统合入主线

    导读 近期,Linux内核5.4系列宣布全面可用,添加了许多新功能,更强的安全性和更新的驱动程序,以提供更好的硬件支持.Linux内核5.4增加对微软exFAT文件系统的支持,另外还支持内核锁定功能, ...

  9. STM32 RTC上的唤醒和闹钟

    RTC很简单只要给备用电,RTC就会不停,可以进行设置和读时间.同时在RTC上也涉及了闹钟(EXTI_17:RTC_FLAG_ALRAF,相当于RTC的定时器,闹钟到了之后进行异步操作)和唤醒中断(低 ...

  10. 任意promise串行执行算法 - 童彪

      // 任意promise串行执行算法 - 童彪 function runAllPromise() { var p1 = new Promise((resove, reject) => { s ...