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 . ...
随机推荐
- http://www.bugku.com:Bugku——变量1(http://120.24.86.145:8004/index1.php)
之前立志做出需要编码解决和时间相关的那道CTF题目,但是这次没找到,相关人士找到了麻烦告诉我一声.本次再学习一下子关于正则表达式和PHP的相关知识.开课咯-.- 刚看题目就发现提示, ...
- mac item2 ssh
一.常规ssh登录流程 ssh登陆有三个参数,主机名,用户名,用户密码,流程都是一样. 1.ssh 用户名@主机名 2.返回包含(yes/no)的字符串,此时输入 “yes" 3.然后再返回 ...
- 【网络编程三】网络通信之多进程(线程)实现TCP通信(一)
[多进程] [多线程] /************************************************************************* > File sum ...
- web接口的开发
老样子,抛出一个问题:什么是接口? 不解释了,百度吧. 了解起来先从HTTP开始说起吧. HTTP协议的特点: 1,无连接,就是指每次连接都仅仅只处理一个请求,服务器处理完客户的请求之后,收到客户的应 ...
- Java_10.1继承应用
/* * 描述学生和工人两个类 name age进行抽取 ,父类 Person 提供set get * 同时创建学生和工人对象 必须明确年龄和姓名 并且控制台输出 * */ ...
- 线特征---Edge Drawing(七)
http://ceng.anadolu.edu.tr/cv/edgedrawing/ References C. Topal, C. Akinlar, Edge Drawing: A Combined ...
- WEB框架之Django实现分页功能
一 Paginator分页器 1 首先在数据库中生成大量数据 def index(request) book_list = [] for i in rang(1000) book = Book(tit ...
- spring boot 1.5.3项目放到resin4.0.53报错
报错信息: {main} java.lang.AbstractMethodError: org.hibernate.validator.internal.engine.ConfigurationImp ...
- Android——图片视图(ImageView)、状态开关按钮(ToggleButton)、时钟、图片透明度、滚动和时间选择器
activity_ui1.xml dth="wrap_content" android:layout_height="wrap_content" android ...
- fis代码压缩
Fis代码压缩步骤 1,安装fis(http://fis.baidu.com/fis3/docs/beginning/install.html) fis安装支持的node版本:0.8x,0.10x,0 ...