jQuery 常用效果
hide和show 同样有 fadeInhe fadeOut 的功能
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(2000);
});
$("#show").click(function(){
$("p").show(2000);
});
});
toggle 隐藏显示自动切换 同样后面可以跟时间 做到 fadeToggle 的效果
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000);
});
});
淡入淡出:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
fadeToggle 淡入淡出自动切换
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
slideToggle 滑动效果 自动切换 做到slideDown() 与 slideUp() 方法之间进行切换。
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
animate 动画效果:
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
设置元素 不断的增加范围
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
队列功能
$("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");
});
元素移动到右边,然后增加文本的字号
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
callback 执行效果后回调:
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
jQuery 常用效果的更多相关文章
- jQuery常用效果
1.滑动效果 向上效果:slideUp() 向下效果:slideDown() 向上与向下切换:slideToggle() 2.淡入淡出效果 显示与隐藏切换:fadeToggle() 3.显示隐藏 显示 ...
- JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件
JQuery 常用API 参考资料:JQuery 官网 jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
- jS事件之网站常用效果汇总
下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...
- JQuery常用实用的事件[较容易忽略的方法]
JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...
- jquery常用函数与方法汇总
1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jQuery常用插件与jQuery使用validation插件实现表单验证实例
jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...
随机推荐
- bootstrap-table 使用遇到的问题总结
问题一:右上角button样式自定义 方法: //修改bootstrap-table右上角按钮样式 $(".table-box .columns-right button").re ...
- 【转】python中的字符数字之间的转换函数
int(x [,base ]) 将x转换为一个整数 long(x [,base ]) 将x转换为一个长整数 float(x ) ...
- ClickHouse高性能数据库
ClickHouse之简单性能测试 前面的文章ClickHouse之初步认识已经简单的介绍了ClickHouse,接下来进行简单的性能测试.测试数据来源于美国民用航班的数据,从1987年到2017 ...
- HttpClient上传文件
1.上传客户端代码: public static void upload() { CloseableHttpClient httpclient = HttpClients.createDefault( ...
- springboot中controller的使用
一.知识点 1 @Controller 处理http请求(不推荐使用) 2 @RestController spring4之后新加的注解,原来返回json需要@ResponseBody配合@Contr ...
- matlab函数拟合
1 函数拟合 函数拟合在工程(如采样校正)和数据分析(如隶属函数确定)中都是非常有用的工具.我这里将函数拟合分为三类:分别是多项式拟合,已知函数类型的拟合和未知函数类型的拟合.matlab中关于函数的 ...
- PAT 1039 到底买不买(20)(20 分)
1039 到底买不买(20)(20 分) 小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要 ...
- VS Installer教程
本文主要讲解利用VS2010下的Visual Studio Installer打包Zigbee程序(VS2010编写)的过程. 1.打开Zigbee程序,在解决方案中添加“新建项目”-->其他项 ...
- 小话C源码移植
我们知道国外很多程序员工作在linux / unix 环境下,所以有很多优秀的c/c++语言代码不能直接在windows平台进行编译. 很多时候我们只能使用msys, cmake等工具进行模拟环境编译 ...
- Eclipse 安装使用 M2Eclipse 插件
help --> Install New Software --> Add 安装完后需要重启eclipse 通常 Eclipse 会自带 Maven.但可能按自己安装的 Maven 存在版 ...