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

一、总结

一句话总结：jquery可以用户animate()自定义动画，也可以slide和fade系列方法来设置动画。

1、动画效果如何设置执行时间？

在方法里面带上时间参数即可，所有的都是这样

25         $(this).next().fadeOut(1000);
 5         $(this).next().slideUp(1000);

2、滑上滑下的一组效果怎么写（三个常用方法）？

关键词为slide，slideDown(); slideUp();slideToggle();

 2 $('h1').click(function(){

 3     d=$(this).next().css('display');

 4     if(d=='block'){

 5         $(this).next().slideUp(1000);

 6     }else{

 7         $(this).next().slideDown(1000);

 8     }

 9 });

3、如何根据css属性来判断元素的操作？

用css()拿出属性值，然后判断，比如判断显隐就可以用下面方法

22     d=$(this).next().css('display');

23

24     if(d=='block'){

4、淡入淡出动画的一组操作有哪些（三个方法）？

fadeIn();
fadeOut();
fadeTo();

21 $('h1').click(function(){

22     d=$(this).next().css('display');

23

24     if(d=='block'){

25         $(this).next().fadeOut(1000);

26     }else{

27         $(this).next().fadeIn(1000);

28     }

29 });

二、jquery常用动画效果有哪些

1、相关知识

1.基本
show(time);
hide(time);
toggle(time);

2.滑动
slideDown();
slideUp();
slideToggle();

3.淡入淡出
fadeIn();
fadeOut();
fadeTo();

2、代码

fadeIn和fadeOut淡入淡出

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <h1>linux</h1>

     <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>

     <h1>linux</h1>

     <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>

 </body>

 <script>

 $('h1').click(function(){

     d=$(this).next().css('display');

     if(d=='block'){

         $(this).next().fadeOut(1000);

     }else{

         $(this).next().fadeIn(1000);

     }

 });

 </script>

 </html>

fadeTo改变透明度

 <script>

 $('h1').click(function(){

     d=$(this).next().css('opacity');

     if(d=='1'){

         $(this).next().fadeTo(1000,0.5);

     }else{

         $(this).next().fadeTo(1000,1);

     }

 });

 </script>

slideToggle切换滑上滑下

 <script>

 $('h1').click(function(){

     $(this).next().slideToggle();

 });

 </script>

slideDown滑下slideUp滑上

 <script>

 $('h1').click(function(){

     d=$(this).next().css('display');

     if(d=='block'){

         $(this).next().slideUp(1000);

     }else{

         $(this).next().slideDown(1000);

     }

 });

 </script>
 

jquery-12 jquery常用动画效果有哪些的更多相关文章

  1. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  2. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  3. jquery 最简单的动画效果

    <p style="border: 1px solid red"> 我会慢慢变大 </p> <a>dianji</a> <sc ...

  4. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  5. Jquery绑定事件及动画效果

    Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...

  6. 关于JQuery（最后一点动画效果*）

    1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...

  7. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  8. 强大的JQuery（二）--动画效果

    上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...

  9. jQuery入门基础（动画效果）

    一.隐藏显示 1.show()--显示隐藏的被选择元素 例:$(selector).show(speed,callback); 2.hide()--隐藏被选元素的内容 例:$(selector).hi ...

随机推荐

  1. 实战c++中的vector系列--copy set to vector(别混淆了reserve和resize)

    stl算法中有个copy函数.我们能够轻松的写出这种代码: #include <iostream> #include <algorithm> #include <vect ...

  2. 用 runcloud.io 免费部署、优化管理你的多个VPS( 目前支持 Ubuntu 16.04 )

    使用RunCloud.io轻松实现Web部署 使用VPS.云服务器,通常会安装基本的操作系统,之后必须自己安装Apache,MySQL,PHP,尤其是服务器的性能优化,这对大多数人来说可能是非常具有挑 ...

  3. vmware-虚拟机播放器的下载、安装

    如果是在window下安装的话: 1.下载vmware: 到官网下载免费个人版本 https://my.vmware.com/cn/web/vmware/free#desktop_end_user_c ...

  4. 洛谷——U10783 名字被和谐了

    https://www.luogu.org/problem/show?pid=U10783 题目背景 众所周知,我们称g是a的约数,当且仅当g是正数且a mod g = 0. 众所周知,若g既是a的约 ...

  5. 利用安卓手机的OTG共享有线网络

    利用安卓手机的OTG共享有线网络 安卓手机有些是支持OTG的,OTG的显著特点就是手机能给外部设备供电,而且能交换数据. 那么,没有OTG功能的手机能不能给弄个OTG出来呢?当然可以,原因很简单,既然 ...

  6. amazeui学习笔记一（开始使用3）--兼容性列表compatibility

    amazeui学习笔记一(开始使用3)--兼容性列表compatibility 一.总结 1.不要用ie做前端测试,不要碰ie,尽量用google 浏览器: 按照微软官方的说法,IE 开发者工具中的浏 ...

  7. 解决Win8/8.1无法正确识别USB3.0的问题

    找一个USB3.0的移动硬盘到了手里竟然变成2.0的了!二了! 不能忍啊. 听说是快速启动的问题,但是开机速度快很诱人. 百度了其他解决方法,终于解决了. 下面摘录自: http://blog.csd ...

  8. P2P平台项目建设几点注意事项

    种选择 a.资金池,接入第三方支付,财付通,宝付等,比如一起好 b.第三方资金托管,易宝支付.汇付天下等 c.银行存管,资金放在银行 资金池政策风险,不得不考虑. 每一种模式,技术实现都有变化,需要考 ...

  9. VC++的函数指针和回调函数 及友元函数

    什么是函数指针 函数指针是指向函数的指针变量.也就是说,它是一个指针变量,而且该指针指向一个函数. 对于指针变量来说,它的值是它指向的变量的地址.举个例子:指针变量pi是指向一个整型变量i的指针,则变 ...

  10. 基于zookeeper实现的分布式锁

    基于zookeeper实现的分布式锁 2011-01-27 • 技术 • 7 条评论 • jiacheo •14,941 阅读 A distributed lock base on zookeeper ...