问题:效果受局限

解决:万能动画函数: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. python selenium配置

    写该博客时环境 mac 10.14.1 (18B75) python 3.7 pip (不用这个就是了,用pip3) $ pip --version pip 10.0.1 from /Users/wj ...

  2. Uniform Resource Name Server

    HTTP The Definitive Guide 按址标识 identify by address 按名标识 identify by name Domain Name Server Uniform ...

  3. io.UnsupportedOperation: not readable

    两处错误一.你是用open打开一个文件,此时调用的是w写入模式,下面使用read是没有权限的,你得使用w+读写模式二.使用write写入一个字符s,但是此时并没有真正的写入,而是还存在与内存中.此时执 ...

  4. LeetCode 637 Average of Levels in Binary Tree 解题报告

    题目要求 Given a non-empty binary tree, return the average value of the nodes on each level in the form ...

  5. npm的源改成淘宝镜像

    修改源地址为淘宝 NPM 镜像npm config set registry http://registry.npm.taobao.org/ 修改源地址为官方源npm config set regis ...

  6. tensorflow入门笔记（四） tf.summary 模块

    模块内的函数: tf.summary.audio(name, tensor, sample_rate, max_outputs=3, collections=None, family=None) 输出 ...

  7. 从EnableJpaRepositories说开去

    1 .spring boot @EnableJpaRepositories( repositoryBaseClass = BaseRepositoryImpl.class, includeFilter ...

  8. 前端用Json传输数据给后台，用postman测试

    postman发送json格式的post请求   在地址栏里输入请求url:http://127.0.0.1:8081/getmoney 选择“POST”方式, 在“headers”添加key:Con ...

  9. kvc原理

    KVC底层实现原理 第一步:寻找该属性有没有setsetter方法?有,就直接赋值 第二步:寻找有没有该属性带下划线的成员属性?有,就直接赋值 第三步:寻找有没有该属性的成员属性?有,就直接赋值 1. ...

  10. VS Code 管理 .NET Core解决方案

    本练习要使用Visual studio code完成一个包含多个项目的解决方案,包括类库和Web项目.结合Visual Studio Code和.NET Core CLI,创建项目结构如下: pied ...