jquery笔记(效果)
显示/隐藏:
$(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 效果函数,包括滑动、淡入淡出和自定义动画。
jquery笔记(效果)的更多相关文章
- Jquery笔记和ajax笔记
Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...
- 前端:jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
- css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】
新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程] 作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...
- jquery动画效果---animate()--滚屏
jquery动画效果---animate()方法---W3school
- jquery 之效果
// jquery 之效果 .css()既可以获取值,如 .css('fontSize'), 又可以设置内置属性,既可用驼峰式,也可以用连字符版,如 .css('background-color', ...
随机推荐
- HDU 1087 Super Jumping! Jumping! Jumping! --- DP入门之最大递增子序列
DP基础题 DP[i]表示以a[i]结尾所能得到的最大值 但是a[n-1]不一定是整个序列能得到的最大值 #include <bits/stdc++.h> using namespace ...
- NIS域配置详解
一.前期准备1.1 NIS 简介NIS,英文的全称是network information service,也叫yellow pages.在Linux中,NIS是一个基于RPC的client/serv ...
- [页面滚动到底部]jquery $(window).height()取值等于$(document).height()的问题
问题现象:JSP中头部引用了某个head.jsp,在videoList.jsp中生成片段时如下 实际最终生成的HTML如下: <!DOCTYPE html>没有解析到,原因找到了,先想办法 ...
- python安装paramiko模块
一.简介 paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. 由于使用的是python这样的能够跨平台运行的语言,所以所有python支 ...
- 在linux中,rpm和yum有什么区别?
rpm是由红帽公司开发的软件包管理方式,使用rpm我们可以方便的进行软件的安装.查询.卸载.升级等工作.但是rpm软件包之间的依赖性问题往往会很繁琐,尤其是软件由多个rpm包组成时.Yum(全称为 Y ...
- 数独挑战(codevs 2924)
2924 数独挑战 时间限制: 1 s 空间限制: 1000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Description “芬兰数学家因卡拉,花费3 ...
- NYOJ题目100 1的个数
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsMAAAIqCAIAAABOpdBfAAAgAElEQVR4nO3drXLbzP834P9JhOdAgn ...
- C#学习笔记--详解委托,事件与回调函数
.Net编程中最经常用的元素,事件必然是其中之一.无论在ASP.NET还是WINFrom开发中,窗体加载(Load),绘制(Paint),初始化(Init)等等.“protected void Pag ...
- PHP 获取图像信息 getimagesize 函数
getimagesize() 函数用于获取图像尺寸,类型等信息. imagesx() 函数用于获取图像的宽度. imagesy() 函数用于获取图像的高度. getimagesize() getima ...
- Javascript事件冒泡机制
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...