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 常用效果的更多相关文章

  1. jQuery常用效果

    1.滑动效果 向上效果:slideUp() 向下效果:slideDown() 向上与向下切换:slideToggle() 2.淡入淡出效果 显示与隐藏切换:fadeToggle() 3.显示隐藏 显示 ...

  2. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  3. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  4. jquery-12 jquery常用动画效果有哪些

    jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...

  5. jS事件之网站常用效果汇总

    下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...

  6. JQuery常用实用的事件[较容易忽略的方法]

     JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...

  7. jquery常用函数与方法汇总

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...

  8. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  9. jQuery常用插件与jQuery使用validation插件实现表单验证实例

    jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...

随机推荐

  1. bootstrap-table 使用遇到的问题总结

    问题一:右上角button样式自定义 方法: //修改bootstrap-table右上角按钮样式 $(".table-box .columns-right button").re ...

  2. 【转】python中的字符数字之间的转换函数

    int(x [,base ])         将x转换为一个整数     long(x [,base ])        将x转换为一个长整数     float(x )               ...

  3. ClickHouse高性能数据库

    ClickHouse之简单性能测试   前面的文章ClickHouse之初步认识已经简单的介绍了ClickHouse,接下来进行简单的性能测试.测试数据来源于美国民用航班的数据,从1987年到2017 ...

  4. HttpClient上传文件

    1.上传客户端代码: public static void upload() { CloseableHttpClient httpclient = HttpClients.createDefault( ...

  5. springboot中controller的使用

    一.知识点 1 @Controller 处理http请求(不推荐使用) 2 @RestController spring4之后新加的注解,原来返回json需要@ResponseBody配合@Contr ...

  6. matlab函数拟合

    1 函数拟合 函数拟合在工程(如采样校正)和数据分析(如隶属函数确定)中都是非常有用的工具.我这里将函数拟合分为三类:分别是多项式拟合,已知函数类型的拟合和未知函数类型的拟合.matlab中关于函数的 ...

  7. PAT 1039 到底买不买(20)(20 分)

    1039 到底买不买(20)(20 分) 小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要 ...

  8. VS Installer教程

    本文主要讲解利用VS2010下的Visual Studio Installer打包Zigbee程序(VS2010编写)的过程. 1.打开Zigbee程序,在解决方案中添加“新建项目”-->其他项 ...

  9. 小话C源码移植

    我们知道国外很多程序员工作在linux / unix 环境下,所以有很多优秀的c/c++语言代码不能直接在windows平台进行编译. 很多时候我们只能使用msys, cmake等工具进行模拟环境编译 ...

  10. Eclipse 安装使用 M2Eclipse 插件

    help --> Install New Software --> Add 安装完后需要重启eclipse 通常 Eclipse 会自带 Maven.但可能按自己安装的 Maven 存在版 ...