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. thinkphp验证码（总结之后，效率非常好）

    thinkphp验证码(总结之后,效率非常好) 一.总结 1.总结:总结之后,效率非常好,复习的时候也才方便,也能深入到细处,非常方便建立熟悉感和突破使用困境 2.验证码使用中文集或者繁体集设置:这个 ...

  2. BZOJ3620: 似乎在梦中见过的样子(KMP)

    Description “Madoka,不要相信 QB!”伴随着 Homura 的失望地喊叫,Madoka 与 QB 签订了契约. 这是 Modoka 的一个噩梦,也同时是上个轮回中所发生的事.为了使 ...

  3. Shiro学习总结（3）——Apache Shiro身份认证

    身份验证,即在应用中谁能证明他就是他本人.一般提供如他们的身份ID一些标识信息来表明他就是他本人,如提供身份证,用户名/密码来证明. 在shiro中,用户需要提供principals (身份)和cre ...

  4. Android学习之图片压缩，压缩程度高且失真度小

    曾经在做手机上传图片的时候.直接获取相机拍摄的原图上传,原图大小一般1~2M.因此上传一张都比較浪费资源,有些场景还须要图片多张上传,所以近期查看了好多前辈写的关于图片处理的资料.然后试着改了一个图片 ...

  5. Behavioral模式之Visitor模式

    1.意图 表示一个作用于某对象结构中的各元素的操作.它使你能够在不改变各元素的类的前提下定义作用于这些元素的新操作. 2.别名 无 3.动机 考虑一个编译器.他将源程序表示为一个抽象语法树.该编译器须 ...

  6. optionMenu-普通菜单使用

    首先结合如下的代码来看 package com.android.settings; import android.R.integer; import android.app.Fragment; imp ...

  7. ontouch、dispatchtouchevent、interceptouchevent-相关事件

    这几天一直在研究onTouch的相关方法,今天我们就来看看onTouchEvent.dispatchTouchEvent.onIntercepTouchEvent这三个方法在控件之间的传递顺序 pub ...

  8. PHP服务器环境打开配置文件

    MAC 1.  cd /usr/local/etc/nginx/servers vim www.xxx.com 2. 在/usr/local/etc/nginx/servers目录下,不同的 .con ...

  9. app 自动化测试 Appium+python可以运行的代码

    Appium

  10. windows CE项目开发

    软件列表 1.Windows mobile 设备中心 2.Microsoft visual Studio 2008 3.串口调试工具(sscom42.exe) 4.Wince 6.0模拟器 5.vir ...