问题:效果受局限

解决:万能动画函数:animate()

animation()可对数值类型的CSS样式执行定时器动画

包括:宽高，位置，透明度，边框宽度，字体大小

强调:不能对非数值类型属性做动画

包括:(颜色，背景图片，字体，display)

如何使用:

$(...).animate(params,speed-速度,easing-效果,fn)

其中：params:{css属性1:值1，css属性2:值2，....}

      speed：{动画持续时间/速度}

      easing：{速度的变化效果}

      fn：动画结束后，自动调用的回调函数

动画中的排队和并发

排队:多个动画顺序，先后执行

并发:多个动画同时执行

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #d1{border:1px solid #aaa;

            border-radius: 6px;

            background:#eee;

            word-break: break-all;

            width: 200px;

            height: 200px;

            position:absolute;

            }

    </style>

</head>

<body>

<h1>jQuery动画函数---透明函数</h1>

<button id="btn1">开始动画</button>

<br/><br/><br/><br/>

<div id="d1">

  jksahdkjhjashdjaskdhjksahdkjh

</div>

<script src="javascript/jquery-1.11.3.js"></script>

<script>

    $("#btn1").click(function(){

    $("#d1").animate({left:"300px"},2000)

            .animate({top:"300px"},2000)

    })

</script>

</body>

</html>

jQuery-animate万能动画效果的更多相关文章

  1. animate实现动画效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. Jquery如何使用动画效果改变背景色

    Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...

  3. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  4. jQuery之简单动画效果

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

  5. JQuery(二)——简单动画效果

    上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...

  6. jQuery的事件,动画效果等

    一.事件 click(function(){}) 点击事件 hover(function(){})   悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){}) ...

  7. python 之 前端开发（ jQuery事件、动画效果、.each()、 .data()）

    11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); ​ // 绑定方 ...

  8. Jquery基础（动画效果的轮播图特效）

    jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...

  9. [学习笔记]jQuery实现一些动画效果的方法

    jQuery实现效果的方法 1,隐藏和显示:hide(),show(),toggle()  // [ˈtɑ:gl]切换 语法: $(selector).hide(speed,callback); $( ...

随机推荐

  1. linux：基本指令mkdir, rmdir 和rm

    mkdir 建立文件夹 mkdir (make directory) 就是创建一个文件夹的意思, 使用起来很简单. 1.新建一个目录: $ mkdir folder2 如果你想在这个目录给 folde ...

  2. tp5, laravel, yii2我该选择哪个

    为什么写这篇文章 我个人有一个技术群,里面学什么框架的都有,经常会有人问 某某功能 在 哪个框架怎么实现,用什么框架实现更好,说道这里我大家讲一个同类型问题的笑话 某女:你能让这个论坛的人都吵起来,我 ...

  3. jQuery -- 监听input、textarea输入框值变化

    $('textarea').bind('input propertychange', function(){ if($(".textareachange").val() != &q ...

  4. redis安装详解

    一.redis安装步骤: 1.首先上官网下载Redis 压缩包,地址:http://redis.io/download 下载稳定版3.0.7即可.2.通过远程管理工具,将压缩包拷贝到Linux服务器中 ...

  5. 洛谷P4495 奇怪的背包 [HAOI2018] 数论

    正解:数论+dp 解题报告: 传送门! 首先看到这题,跳无数次,自然而然可以想到之前考过好几次了的一个结论——如果只考虑无限放置i,它可以且仅可以跳到gcd(p,v[i]) 举一反三一下,如果有多个i ...

  6. Spring加载classpath与classpath*的过程剖析

    使用spring-boot 1.5.7 在resource目录下创建i18n文件夹 使用spring的默认配置没有加载到文件 # INTERNATIONALIZATION (MessageSource ...

  7. 10.0-uC/OS-III任务管理

    1.实时应用中一般将工作拆分为多个任务,每个任务都需要是可靠的.任务(也叫做线程)是简单的程序.单CPU中,在任何时刻只能是一个任务被执行. 2.uC/OS-III支持多任务且对任务数量没有限制, 任 ...

  8. 使用Nginx搭建集群

    反向代理: 1.首先启动一个项目,启动后可以通过http://localhost:8080/getResult访问到接口,如图: 2.修改nginx配置文件,监听www.ouyan.com的80端口, ...

  9. JavaScript学习（八）

  10. host文件

    # Copyright (c) 1993-2009 Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP f ...