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. the resource is not on the build path of a java project错误

    在eclipse中,使用mavenimport了一个工程,但是在对某一个类进行F3/F4/ctrl+alt+H操作的时候报错:“the resource is not on the build pat ...

  2. 如何修复和检测Windows系统漏洞

    本文为<如何给系统打补丁(知识篇)>一文实战文章.   本文出自 "李晨光原创技术博客" 博客,谢绝转载!

  3. BZOJ1212: [HNOI2004]L语言(Trie图+DP)

    Description 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D ...

  4. CISP/CISA 每日一题 22

    CISSP 每日一题(答)What should be done to verify patcheshave been applied? Auditpatches, or use a vulnerab ...

  5. Vijos——T1279 Leave-绿光

    https://vijos.org/p/1279 背景 期待这一份幸运,和一份冲劲,多么奇妙的际遇…….燕姿在演唱完绿光这首歌后,出给了姿迷一个考题. 北欧有一个传说!人一生中能看见绿光!他就一生都可 ...

  6. Binary Search Algorithm

    二分查找代码: //============================================================================ // Name : Bin ...

  7. Javascript和jquery事件--键盘事件KeyboardEvent

    Js和jq事件—键盘事件KeyboardEvent 键盘事件keydown,keypress和keyup,还需要涉及到一个文本事件textInput. keydown,keypress和keyup事件 ...

  8. CODEVS——T 1993 草地排水 USACO

    http://codevs.cn/problem/1993/  时间限制: 2 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 De ...

  9. 自己写的Android图表库XCL-Charts一些旧的样例

    话说有了灵感就要抓住,来了兴趣就要去研究它. 所以尽管近期非常忙.但我还是没有丢下Android图表实现的研究.最终如今我的图表库基类 基本上已经有点模样了.不在是小打小闹,而是能依传入參数非常灵活的 ...

  10. BingMap频繁Add Pushpin和Delete Pushpin会导致内存泄露

    近期在做性能測试的时候发现BingMap内存泄露(memory leak)的问题,查找了一些国外的帖子,发现也有类似的问题,可是没有好的解决的方法. https://social.msdn.micro ...