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. 用Laravel+Grunt+Bower管理你的应用

    来源:http://yansu.org/2014/03/10/grunt-bower-and-laravel.html 为什么这么选择? 如今开源盛行,从后端的各个类库,到如今前端的jQuery插件, ...

  2. 个人记录比较好的css样式

    background:#835838;  filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.8; 设置背景颜色为透明! IE6. IE7.IE8. ...

  3. 使用Word发表博客

        使用浏览器编辑博客,会让你感到非常不方便,如果在没有网络的时候,就不能打开编辑器页面了,只能先写在word或其他编辑软件中.可以设置word使用word编辑并直接发布到博客.   文件 - 新 ...

  4. JAVA 如何把request请求的参数，快速放到model对象中

    因为项目需要,需要从request中读取大量的参数. 因为本人过懒,所以写了个方法把request参数,直接放到对应的类中. 参数 String str="aa,bb,cc"; P ...

  5. android 指示器 tablatyout

    <android.support.design.widget.TabLayout/>android 材料设计中新出的控件 package com.weavey.loadinglayout; ...

  6. less和sass的介绍和差异

    ● 混入(Mixins)——class中的class: ● 参数混入——可以传递参数的class,就像函数一样: ● 嵌套规则——Class中嵌套class,从而减少重复的代码: ● 运算——CSS中 ...

  7. linux环境下安装jdk

    1.查看系统自带的jdk #RPM -qa|grep jdk 若存在则删除 jdk-1.7.0_67-fcs.x86_64 #rpm -e --nodeps jdk-1.7.0_67-fcs.x86_ ...

  8. arm嵌入式交叉编译工具链

    1.arm-linux-gcc 常用的参数:-o[制定输出文件名] -c[只到编译停止,不连接] -g[键入调试信息] -xO[优化级别] -w/W(警告等级) arm-linux-gcc -o de ...

  9. Windows Server 2003 IIS6.0+PHP5(FastCGI)+MySQL5环境搭建教程

    准备篇 一.环境说明: 操作系统:Windows Server 2003 SP2 32位 PHP版本:php 5.3.14(我用的php 5.3.10安装版) MySQL版本:MySQL5.5.25 ...

  10. MySQL版本升级之5.6到5.7

    两种升级方式 In-Place Upgrade: Involves shutting down the old MySQL version, replacing the old MySQL binar ...