一、显示隐藏:

可以使用show()和hide()方法来显示隐藏;

$("#hide").click(function(){
$("p").hide();
})
$("#show").click(function(){
$("p").show();
});

  可以使用toggle()方法在show()方法和hide()方法中间切换;

$("#tog").click(function(){
$("p").toggle();
});

  语法:

$(selector).show(speed,callback);
$(selector).hide(speed,callback);
$(selector).toggle(speed,callback);
//其中speed 和callback都是可选参数,speed单位为毫秒(如设置成1000,2000等);callback为回调函数;

  

二、淡入淡出:

方法:fadeIn();     fadeOut();    fadeToggle();    fadeTo()

$("#btn").click(function(){
$("#div1").fadeIn();
$("#div2").fadeOut(2000);
$("#div3").fadeIn("slow") ;
})

  语法:

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

    $(selector).fadeOut(speed,callback);

    $(selector).fadetoggle(speed,callback);

#("#btn").click(function(){
$("#div4").fadeTo(slow,0.12);
});

  fadeTo可以使对象渐变成给定的透明度值(结余0到1之间);

语法:fadeTo(speed,opacity,callback);

三、滑动:

方法:slideDown()      slideUp()    slideToggle()

$("button").click(function(){
$("#p1").slideUP("slow"); //向上滑动隐藏
$("#p2").slideDown("slow"); //向下滑动隐藏
$("#p3").toggle("slow"); //切换
});

  语法:

  $(selector).slideUp(speed,callback);

  $(selector).slideDown(speed,callback);

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

四、animate动画:

语法:

$(selector).animate({params},speed,callback);

  必须:params参数定义形成动画后的css属性;

  可选:speed参数为效果时长;

  可选:callback为回调函数;

   1、多参数设置

$("#dtn").click(function(){
$("div").animate({
  left:‘20px’,
  opcity:'0.2',
  height:'150px',
  width:'150px'
  });
});

  2、animate也可以使用相对值:

$("button").click(function(){
$("#div5").animate({
left:'150px',
height:'+=20px',
width:'+=30px',
});
});

  3、可以将animate设置为”show“,”hide“,”toggle“。

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

  效果:在设定值与默认值之间切换;

  4、使用队列功能: 

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

  可以设置多个内部”队列“,执行时候会依次进行animate调用

  5、动画举例:

$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

  效果:将div移动到右边,增加文本字号;

五、stop()方法;

  stop()方法用于停止、中断jQuery效果;

语法:

$(selector).stop(stopAll,goToEnd);

  可选:stopAll,是否应该清除动画队列。默认false,仅会停止当前动画,后续动画依次执行;

  可选:goToEnd,是否立即完成当前动画,默认false。

  因此,默认的stop()会清除元素上正在执行的动画;

六、callback  回调函数

callback:在当前动作完成之后执行。作为可选参数;

如果你希望在一个涉及动画的函数之后执行一条语句,请使用callback;

$("p").hide(1000,function(){
  alert("The paragraph is now hidden");
});

七、Chaining 动作链

 允许我们在一条语句之中用多个jQuery方法,在一个对象上连续使用多个方法,依次执行;

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

  

jquery学习笔记2——jq效果的更多相关文章

  1. jquery学习笔记3——jq HTML

    jQuery最常用的部分就是操作DOM,jQuery提供了一系列操作DOM的相关方法,使其很容易: 一.获取 1.获取内容 text()方法    设置或返回所选元素的文本内容: html()方法   ...

  2. jquery学习笔记3 jq遍历

    遍历方式:向上(父级元素)  向下(子元素)    水平(同胞元素) 一.向上遍历 parent()      向上一级   放回被选元素的直接父元素 parents()          返回被选元 ...

  3. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  4. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  5. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  6. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  7. 初步学习jquery学习笔记(六)

    jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...

  8. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  9. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

随机推荐

  1. WebView 实现MiniBrowser

    package org.hjw.minibrowser; import android.os.Bundle; import android.app.Activity; import android.v ...

  2. Servlet部署描述文件(web.xml)

    最近看了下配置文件(Deployment Descriptor:简称DD),又称部署描述文件,下面详细介绍下该文件的组成和作用: 一.<web-app>有四个属性: 1.xmlns:申明了 ...

  3. X86 IO端口和MMIO

    X86 IO端口和MMIO I/O作为CPU和外设交流的一个渠道,主要分为两种,一种是Port I/O,一种是MMIO(Memory mapping I/O).前者就是我们常说的I/O端口,它实际上的 ...

  4. Nodejs应用安全备忘录

    本人新博客www.wjs.photo,基于360的firekylin,感兴趣的可以看看哈 本文翻译自 www.risingstack.com ,并非逐字逐句的翻译,有错误的地方请指出,谢谢啦 应用程序 ...

  5. Java开发工具箱-JDK的安装与配置

    一.JDK.JRE 术语名 缩写 解释 Java Development Kit JDK Java程序员用的工具包 Java Runtime Enviroment JRE Java程序的运行环境 二. ...

  6. 求a和b的最大公约数

    题目:求a和b的最大公约数 分析:首先我们要知道最大公约数是什么,就是指两个或多个整数共有约数中最大的一个.好了,知道了最大公约数是什么,就可以求解它了,那么就相当于比较俩个数的约数,取其相等的最大的 ...

  7. php目录函数

    1.创建 mkdir()mkdir(目录地址,权限模式,是否递归创建)默认不支持递归创建,用第三个参数true表示递归创建 <?php header("content-type:tex ...

  8. 学习web之路

    一些文章是转接过来,有些是自己原创的.希望大家喜欢,By:xiaohaimian' q:963892669

  9. import,include

    1. #import导入头文件,即:导入头文件中的内容到当前类 2. #import ""导⼊自定义类,#import <>导入类库中的头文件. 3.功能类似C语言中的 ...

  10. Vmware Vcenter6.0 全新安装及群集配置介绍

    介绍如何安装vsphere ESxi主机及将vmware vsphere5.5升级到vmware vsphere6.0的介绍,而今天呢,主要介绍vsphere vcenter,说到vsphere vc ...