显示/隐藏:

$(selector).hide(speed, function()):隐藏

$(selector).show(speed, function()):隐藏

$(selector).toggle(speed, function()):显示/隐藏切换

淡入/淡出:

$(selector).fadeIn(speed, function()):淡入,必须先把元素隐藏掉(display:none)

$(selector).fadeOut(speed, function()):淡出,即慢慢的隐藏掉

$(selector).fadeToggle(speed, function()):淡入/淡出切换

$(selector).fadeTo(speed,opacity,function());:方法允许渐变为给定的不透明度(值介于 0 与 1 之间)

滑动:

$(selector).slideDown(speed,function()):向下滑动

$(selector).slideUp(speed,function()):向上滑动

$(selector).slideToggle(speed,function()):切换

动画:

$(selector).animate({params},speed,function()):当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心 jQuery 库中。与css3动画略有不同的是个人觉得比较好控制,不会回到原来的状态。

可以取相对值:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

使用预定义值:hide(),show(),toggle()

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

使用队列:

$("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");
});

停止动画:

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd):可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此,默认地,stop() 会清除在被选元素上指定的当前动画。
 
方法链接:
采用方法链接的话,浏览器就不必多次查找相同的元素。当你需要链接一个动作,您只需简单地把该动作追加到之前的动作上。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jquery笔记(效果)的更多相关文章

  1. Jquery笔记和ajax笔记

    Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...

  2. 前端:jQuery笔记

    前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...

  3. Python全栈之jQuery笔记

    jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...

  4. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  5. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  6. JQuery动画效果

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

  7. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  8. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

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

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

  10. jquery 之效果

    // jquery 之效果 .css()既可以获取值,如 .css('fontSize'), 又可以设置内置属性,既可用驼峰式,也可以用连字符版,如 .css('background-color', ...

随机推荐

  1. 在MVC的项目中访问静态页面

    MVC在生成项目的时候会生成的WEB-INF底下.这个文件夹下面的文件是受保护的,都会走MVC的流程, 但是我希望在WebContent底下可以使用静态页面, 那么需要进入springmvc-serv ...

  2. NYOJ题目57 6174问题

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAJLCAIAAACE5qzaAAAgAElEQVR4nO3dMXKrutvH8XcT6bOQ1C ...

  3. logstash之multiline插件,匹配多行日志

    在外理日志时,除了访问日志外,还要处理运行时日志,该日志大都用程序写的,比如log4j.运行时日志跟访问日志最大的不同是,运行时日志是多行,也就是说,连续的多行才能表达一个意思. 在filter中,加 ...

  4. 与你相遇好幸运,async解决循环回调问题

    由于使用的sailsjs框架,用的是sailsjs自身带的ORm(就是waterline),ORM的默认数据库的返回值在回调里面. > arg是一个数组 count用来计数用 tmpArr临时存 ...

  5. Spring.Net学习之简单的知识点(一)

    1.Spring.Net是一个开源的应用程序框架,可以简化开发主要功能(1)实现控制反转(IOC/DI),也就是不要直接new,依赖于接口(2)面向切面编程(AOP),就是向程序中利用委托注册事件简单 ...

  6. Python win32api提取exe图标icon

    转载地址: http://blog.csdn.net/gumanren/article/details/6129416 代码如下: # -*- coding: utf-8 -*- import sys ...

  7. [LeetCode] Word Break II (TLE)

    Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...

  8. BI 项目管理之角色和职责

          DW/BI 系统在生命周期中需要许多不同的角色和技能,它们来自业务和技术领域.本文将介绍创建DW/BI 系统所涉及的主要角色.角色和人之间很少是一对一关系.与我们合作的团队小到只有一人,大 ...

  9. 攻城狮在路上(叁)Linux(二十六)--- linux文件系统的特殊查看与操作

    一.boot sector 与 super block的关系: 1.boot sector用于存放引导装载程序,占用1024个字节. 2.super block的大小也为1024字节. 3.若bloc ...

  10. <转>JDBC获取DB元数据

    原文链接:http://jiauwu.iteye.com/blog/1307617 package com.util.jdbc; import java.sql.Connection; import ...