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. android.graphics.Paint方法setXfermode (Xfermode x...

    mPaint = new Paint(); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN)); 常见的Xfermod ...

  2. golang filepath.Walk遍历指定目录下的所有文件

    package main import ( "fmt" "os" "path/filepath" ) func walkFunc(path ...

  3. Direct2D开发：Direct2D 和 GDI 互操作性概述

    本主题说明如何结合使用 Direct2D 和 GDI(可能为英文网页).有两种方法可以结合使用 Direct2D 和 GDI:您可以将 GDI 内容写入与 Direct2D GDI 兼容的呈现器目标, ...

  4. 【例题 8-7 UVA - 11572】Unique Snowflakes

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 类似尺取法. 用set判断这段区间有没有重复的数字. 有的话,就把头节点的那个数字删掉,直到没有为止. [代码] /* 1.Shou ...

  5. 在安卓(手机)上运行 Ubuntu (Linux)

    在安卓(手机)上运行 Ubuntu (Linux) 由于x86 和 arm 是跨平台的,所使用的编译器自然也不同.如果要在电脑上编译安卓手机上的程序,则需在电脑端建立ARM交叉编译环境,这个过程是在耗 ...

  6. web service 原理

    Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的 ...

  7. 【Codeforces Round #432 (Div. 2) B】Arpa and an exam about geometry

    [链接]h在这里写链接 [题意] 给你3个点A,B,C 问你能不能将纸绕着坐标轴上的一点旋转.使得A与B重合,B与C重合 [题解] 这3个点必须共圆. 则A,B,C不能为一条直线.否则无解. 共圆之后 ...

  8. Android Gradle统一依赖管理

    目的: 避免在依赖包出新版本时,需要对每个module中的build.gradle文件都进行修改(如appcompat-v7包),使用这种方式即只需一次修改. 方法一 在项目的根目录创建一个gradl ...

  9. AbstractQueuedSynchronizer的介绍和原理分析

    简介 提供了一个基于FIFO队列,可以用于构建锁或者其他相关同步装置的基础框架.该同步器(以下简称同步器)利用了一个int来表示状态,期望它能够成为实现大部分同步需求的基础.使用的方法是继承,子类通过 ...

  10. LeetCode Algorithm 04_Median of Two Sorted Arrays

    There are two sorted arrays A and B of size m and n respectively. Find the median of the two sorted ...