一、animate()语法

$(“选择器”).animate({CSS样式},时间,运动方式,回调函数);

参数说明：

参数1：CSS属性名，属性值，JSON格式{"属性名":"属性值"}

参数2：动画执行时间，毫秒

参数3：动画的运动方式，参数要用引号，例如：linear是匀速播放

参数4：回调函数function(){}，动画完毕后，执行的函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

    div{

        width:200px;

        height:200px;

        background: greenyellow;

        position:absolute;

        top:0;

        left:0;

    }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

<script src="js/jquery-1.12.4.min.js"></script>

<script>

$('div').animate({'top':500,'left':400},3000,function(){

    $(this).css('backgroundColor','pink');

})

</script>

二、不能参加运动的属性

我们关心的不能参加运动的有哪些？

1、background-color 背景色。但是CSS3可以实现

2、background-position背景定位，但是CSS3可以实现

3、一切的CSS3属性不能动画，border-radius除外。

三、动画排序

一个元素animate的时候，会按顺序执行

//$('div').animate({"left":500},1000);

//$('div').animate({"top":500},1000);

//$('div').animate({"left":0},1000);

//$('div').animate({"top":0},1000);

同一个元素多次打点animate的时候，动画会自动排成队列，谁先写的，谁先执行。

$('div').animate({"left":500},1000).animate({"top":500},1000).animate({"left":0},1000).animate({"top":0},1000);

四、异步语句和回调函数

animate动画方法是一个异步语句，也可以写回调函数，描述运动结束后可以做什么事情。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

    div{

        width:100px;

        height:100px;

        background: red;

        position:absolute;

        top:100px;

        left:0;

    }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

<script src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

 $('div').animate({'left':500},1000,function(){

     $(this).css('backgroundColor','blue');

 })

</script>

其他方法也都有回调函数：

slideUp()、slideDown()、fadeIn()、fadeOut()、show()、hide()

五、延迟动画delay()

所有动画方法都可以用delay()。表示这动画不是立即执行，要等待一段时间再执行。

参数：规定延迟时间。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

    div{

        width:100px;

        height:100px;

        background: red;

        position:absolute;

        top:0;

        left:0;

    }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

<script src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

// $('div').delay(1000).slideUp();

// $('div').delay(1000).slideDown();

// $('div').delay(2000).nimate({'left':500},1000)

$('div').delay(1000).slideUp().delay(1000).slideDown().delay(2000).animate({'left':500},1000)

</script>

六、stop()停止动画方法

//stop(是否清空动画队列,是否完成当前动画); 默认stop(false,false);
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

     div{

         width:100px;

         height:100px;

         background: red;

         position:absolute;

         top:100px;

         left:0;

     }

    </style>

</head>

<body>

    <input type="button" value="stop()默认flase\false">

    <input type="button" value="stop(true)">

    <input type="button" value="stop(true,true)">

    <input type="button" value="stop(false,true)">

    <input type="button" value="finish()">

    <div></div>

</body>

</html>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$('div').animate({'left':1000},1500);

$('div').animate({'top':300},1500);

$('div').animate({'left':0},1500);

$('div').animate({'top':100},1500);

//stop(是否清空动画队列,是否完成当前动画);

$('input').eq(0).click(function(){

    $('div').stop();// false false

})

$('input').eq(1).click(function(){

    $('div').stop(true);  //true flase

})

$('input').eq(2).click(function(){

    $('div').stop(true,true);

})

$('input').eq(3).click(function(){

    $('div').stop(false,true);

})

</script>

七、is(':animated')

is表示“是不是”，而不是“是”，表示检测某一个元素是否具备某种状态，返回true、false的布尔值。

is里面可以写选择器：

1 $(this).is(".t"); //判断当前被点击的p是否有.t这个类名，是就返回true

2 $(this).is("#t"); //判断当前被点击的p是否有#t这个id名，是就返回true

3 $(this).is("p:odd"); //判断当前被点击的p是否是奇数，是就返回true

4 $(this).is("p:lt(3)"); //判断当前被点击的p下标是否小于3，是就返回true

$(this).is("p:visible"); //判断当前被点击的p是否可见

八、动画节流

当一个元素身上被积累了很多动画，不经之间就积累了，我们称为“流氓”

希望新的动画触发时，前面这个动画全部清空，立即停止，防止用户频繁触发事件

方法1：用stop()。清空前面所有动画队列，立即停止当前动画，参数值传第一个true

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

    div{

        width:100px;

        height:100px;

        background: orange;

        position:absolute;

        top:100px;

        left:0;

    }

    </style>

</head>

<body>

    <input type="button" value="到0广州">

    <input type="button" value="到1000北京">

    <div></div>

</body>

</html>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

 $('input').eq(0).click(function(){

     $('div').stop(true).animate({'left':0},1000);

 })

 $('input').eq(1).click(function(){

     $('div').stop(true).animate({'left':1000},1000)

 })

</script>

方法2：节流方法，判断元素is()是否在运动过程中，如果是，就不执行后面的操作；如果不是，就执行后面的动画。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

    div{

        width:100px;

        height:100px;

        background: orange;

        position:absolute;

        top:100px;

        left:0;

    }

    </style>

</head>

<body>

      <input type="button" value="到0广州">

      <input type="button" value="到1000北京">

      <div></div>

</body>

</html>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

 $('input').eq(0).click(function(){

     if(!$('div').is(':animated')){

         $('div').animate({'left':0}, 2000)

     }

 })

 $('input').eq(1).click(function(){

    if(!$('div').is(':animated')){

        $('div').animate({"left":1000},2000);

    }

 })

</script>

jquery-animate()动画的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

  3. jquery animate 动画效果使用说明

    animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性 ...

  4. jQuery animate动画 stop()方法详解~

    一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...

  5. jquery animate动画持续运动

    function fingers(){ $(".box01 .fingers").animate({"width":"7.5rem",&qu ...

  6. jquery的动画函数animate()讲解一

    jquery animate 动画效果使用说明 animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指 ...

  7. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  8. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  9. jquery IE6 下animate 动画的opacity无效

    jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~

  10. jQuery 效果 - 动画 animate() 方法

    我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...

随机推荐

  1. 使用scp命令，远程上传下载文件/文件夹

    1.从服务器下载文件 scp username@servername:/path/filename /local/path例如: scp ubuntu@117.50.20.56:/ygf/data/d ...

  2. 【实战】Axis2后台Getshell

    实战遇到的情况---任意文件读取,读取/conf/axis2.xml内容,读取用户名和密码登录后台 当然弱口令也是屡试不爽的. 操作起来 1.上传cat.aar(链接:https://pan.baid ...

  3. Docker实战:更轻松、更愉快、更高效

    编者按:借助Docker,我们可以更容易地进行web应用部署,而同时不必头疼于项目依赖.环境变量以及各种配置问题,Docker可以快捷.高效地处理好这一切.而这也是本教程所要实现的主要目的.以下是作者 ...

  4. Guava源码解析之EventBus

    最近看Elastic-Job源码,看到它里面实现的任务运行轨迹的持久化,使用的是Guava的AsyncEventBus,一个内存级别的异步事件总线服务,实现了简单的生产-消费者模式,从而在不影响任务执 ...

  5. 【转载】log4j详解使用

    log4j详解 日志论    在应用程序中输出日志有有三个目的:(1)监视代码中变量的变化情况,把数据周期性地记录到文件中供其他应用进行统计分析工作. (2)跟踪代码运行进轨迹,作为日后审计的依据.  ...

  6. python-Condition 进程同步互斥

    #!/usr/bin/python import multiprocessing,time def A(cond): name=multiprocessing.current_process().na ...

  7. JVM启动报错: Could not reserve enough space for object heap error

    首先了解一下参数的含义: 参数 含义 -Xms2G -Xmx2G 代表jvm可用的heap内存最小和最大 -XX:PermSize -XX:MaxPermSize 代表jvm的metadata内存的大 ...

  8. <数据挖掘导论>读书笔记11异常检测

    异常检测的目标是发现与大部分其他对象不同的对象.通常,异常对象被称作离群点(Outlier). 异常检测也称偏差检测(Deviation detection),因为异常对象的属性值明显偏离期望的或者常 ...

  9. java C# objective-c AES对称加解密

    /** * AES加解密 */ public class AESHelper { final static String AES_KEY = "43hr8fhu34b58123"; ...

  10. java并发编程（4）性能与可伸缩性

    性能与可伸缩性 一.Amdahl定律 1.问题和资源的关系 在某些问题中,资源越多解决速度越快:而有些问题则相反: 注意:每个程序中必然有串行的部分,而合理的分析出串行和并行的部分对程序的影响极大:串 ...