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. linux与php时间函数有关的错误解决

    最近在程序里写了不少获取时间或时间戳的函数date() strtotime()等,但是把程序拿到linux上运行却爆出这些函数的错误,具体原因是因为linux本身的时间设置以及php的时区问题. 先确 ...

  2. mysql 找回密码方法

    1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也可以任意地登录 ...

  3. 100. Same Tree

    [题目] Given two binary trees, write a function to check if they are equal or not. Two binary trees ar ...

  4. Jmeter性能测试入门（转）

    出处:http://www.cnblogs.com/by-dream/p/5611555.html Jmeter性能测试步骤 1. 添加线程组之后,先设置这两项: 2. 添加一个http请求 被测的u ...

  5. Android按钮的各个样式设置

    安卓开发学习之014 Button应用详解(样式.背景.按钮单击.长按.双击.多击事件) 一.Button简介 按钮也是继承自TextView 二.XML定义方法 <Button android ...

  6. map的四种遍历方式

    map是Java中非常常用的一种数据结构,但map不同于set和list都继承自Collection接口. 所以map没有实现Collection的Iterator 方法,自身没有迭代器来遍历元素. ...

  7. __attribute__((packed))作用

    1. __attribute__ ((packed)) 的作用就是告诉编译器取消结构在编译过程中的优化对齐,按照实际占用字节数进行对齐,是GCC特有的语法.这个功能是跟操作系统没关系,跟编译器有关,g ...

  8. 网卡故障：弹出界面eth0: 错误：没有找到合适的设备：没有找到可用于链接System eth0 的

    原文地址:http://www.mamicode.com/info-detail-112000.html 报错截图如下: 排错步骤如下: 1:查看系统是否识别相应网卡(发现没有eth0网卡存在): 根 ...

  9. break continue 区别 以及实例

    不论是MATLAB.c/c++.c#还是其他类型的编程语言,我们总是避免不了和for循环以及switch语句打交道,而对循环进行优化的时候,又总是避免不了用到break以及continue来控制循环, ...

  10. sublime text 3 快捷键大全

    Sublime Text 3 快捷键精华版 Ctrl+Shift+P:打开命令面板Ctrl+P:搜索项目中的文件Ctrl+G:跳转到第几行Ctrl+W:关闭当前打开文件Ctrl+Shift+W:关闭所 ...