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. http://www.bugku.com:Bugku——变量1(http://120.24.86.145:8004/index1.php)

           之前立志做出需要编码解决和时间相关的那道CTF题目,但是这次没找到,相关人士找到了麻烦告诉我一声.本次再学习一下子关于正则表达式和PHP的相关知识.开课咯-.-   刚看题目就发现提示, ...

  2. mac item2 ssh

    一.常规ssh登录流程 ssh登陆有三个参数,主机名,用户名,用户密码,流程都是一样. 1.ssh 用户名@主机名 2.返回包含(yes/no)的字符串,此时输入 “yes" 3.然后再返回 ...

  3. 【网络编程三】网络通信之多进程(线程)实现TCP通信(一)

    [多进程] [多线程] /************************************************************************* > File sum ...

  4. web接口的开发

    老样子,抛出一个问题:什么是接口? 不解释了,百度吧. 了解起来先从HTTP开始说起吧. HTTP协议的特点: 1,无连接,就是指每次连接都仅仅只处理一个请求,服务器处理完客户的请求之后,收到客户的应 ...

  5. Java_10.1继承应用

    /*   *  描述学生和工人两个类   name  age进行抽取 ,父类 Person 提供set   get   *  同时创建学生和工人对象  必须明确年龄和姓名  并且控制台输出 * */ ...

  6. 线特征---Edge Drawing(七)

    http://ceng.anadolu.edu.tr/cv/edgedrawing/ References C. Topal, C. Akinlar, Edge Drawing: A Combined ...

  7. WEB框架之Django实现分页功能

    一 Paginator分页器 1 首先在数据库中生成大量数据 def index(request) book_list = [] for i in rang(1000) book = Book(tit ...

  8. spring boot 1.5.3项目放到resin4.0.53报错

    报错信息: {main} java.lang.AbstractMethodError: org.hibernate.validator.internal.engine.ConfigurationImp ...

  9. Android——图片视图(ImageView)、状态开关按钮(ToggleButton)、时钟、图片透明度、滚动和时间选择器

    activity_ui1.xml dth="wrap_content" android:layout_height="wrap_content" android ...

  10. fis代码压缩

    Fis代码压缩步骤 1,安装fis(http://fis.baidu.com/fis3/docs/beginning/install.html) fis安装支持的node版本:0.8x,0.10x,0 ...