Query 一些简单的效果

$(selector).hide(speed,callback); 隐藏

$(selector).show(speed,callback); 显示

$(selector).toggle(speed,callback); 切换

淡入

$(selector).fadeIn(speed,callback); 淡出

$(selector).fadeToggle(speed,callback); 切换

$(selector).fadeTo(speed,opacity,callback); 淡入（淡出）到（透明度）

$(selector).slideDown(speed,callback); 向下滑动

$(selector).slideDown(speed,callback); 向上滑动

$(selector).slideToggle(speed,callback); 切换

$(selector).animate({params},speed,callback); 自定义动画

实例：操作多个属性

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

$("div").animate({

left:'250px',

height:'+=150px',

width:'+=150px'

});

});

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

$("div").animate({

height:'toggle'

});

});

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

var div=$("div");

div.animate({left:'100px'},"slow");

div.animate({fontSize:'3em'},"slow");

});

队列功能

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

var div=$("div");

div.animate({height:'300px',opacity:'0.4'},"slow");

div.animate({width:'300px',opacity:'0.8'},"slow");

div.animate({height:'100px',opacity:'0.4'},"slow");

div.animate({width:'100px',opacity:'0.8'},"slow");

});

$(selector).stop(stopAll,goToEnd); 停止滑动

stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。）

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

$("#start").click(function(){

$("div").animate({left:'100px'},5000);

$("div").animate({fontSize:'3em'},5000);

});

$("#stop").click(function(){

$("div").stop();

});

$("#stop2").click(function(){

$("div").stop(true);

});

$("#stop3").click(function(){

$("div").stop(true,true);

});

});

</script>

</head>

<body>

<button id="start">开始</button>

<button id="stop">停止</button>

<button id="stop2">停止所有</button>

<button id="stop3">停止但要完成</button>

<p><b>"开始"</b> 按钮会启动动画。</p>

<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>

<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>

<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

</html>

方法链接

$

Query 一些简单的效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. iOS开发——实用技术OC篇&简单抽屉效果的实现

    简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一 ...

  3. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  4. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  5. 3.8.1 HTML与CSS简单页面效果实例

    HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. jQuery的几种简单实用效果

    许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...

  7. EditorWindow简单双击效果

    Editor模式下的控件没有提供直接检测双击的消息,但可以简单模拟出双击检测的效果,代码如下所示: private double clickTime = 0f; ... if (GUILayout.B ...

  8. jQuery之简单动画效果

    1. show()显示动画 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow",&quo ...

  9. JQuery(二)——简单动画效果

    上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...

随机推荐

  1. java筛选法求素数

    这本身没什么,代码一堆 发来纪念下而已 本来刚学习java,编写输出100以内的素数 对于我这个有代码运行性能洁癖的人(但是本身又不懂算法)来说,不能忍 于是看了些资料 参考: http://blog ...

  2. 获取数据库表详细信息、存储过程、视图、的sql

    select s.[name] + '.' + t.[name] as tablename from sys.tables as t,sys.schemas as s where t.schema_i ...

  3. JavaScript—赋值表达式

      赋值表达式的运算顺序是从右到左的,因此,可以通过以下方法对多个变量赋值 1 i=j=k=0;//也就是把三个变量初始化为0 赋值表达式中的递增和递减 n++和++n的区别:     简单来说,根据 ...

  4. Haar-like特征

    参考文献: [1]Viola P, Jones M. Rapid object detection using a boosted cascade of simple features[C]//Com ...

  5. B2C电子商务基础系统架构解析(转载）

    系统的开发与演化,前台严格follow消费者的购买流程,后台则盯牢订单流转,牢牢抓住这两条主线,才能高屋建瓴的看清B2C的逻辑链和数据流,更深刻的规划功能模块,从而更有效支撑实际业务的流转. 前台 前 ...

  6. multipath tcp experiment

    git clone https://github.com/Neohapsis/mptcp-abuse.git sudo apt-get install python-pip sudo pip inst ...

  7. PCA and kmeans MATLAB实现

    MATLAB基础知识 l  Imread:  读取图片信息: l  axis:轴缩放:axis([xmin xmax ymin ymax zmin zmax cmin cmax]) 设置 x.y 和  ...

  8. A Brief Review of Supervised Learning

    There are a number of algorithms that are typically used for system identification, adaptive control ...

  9. JSON入门学习

    JSON是一种与开发语言无关的轻量级的数据格式(JavaScript Object Notation) 优点:易于阅读和编写,易于程序解析和生产 JSON数据格式中没有日期及时间的数据格式的.一般直接 ...

  10. java语法基本知识

    java中,变量分为局部和成员变量.局部变量在程序运行的过程中在栈stack中分配存储空间. 从上到下是:heap, stack, data segment, code segment.