问题:效果受局限

解决:万能动画函数: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. vsftp设置不同用户登录ftp的根目录不同

    创建三个用户 [root@SHM-Storage-EF ~]# useradd kids [root@SHM-Storage-EF ~]# useradd mini [root@SHM-Storage ...

  2. 搭建Kubernetes服务集群遇到的问题

    kube-proxy问题: Apr 12 09:42:49 compute1 kube-proxy[12965]: E0412 09:42:49.602342 12965 reflector.go:2 ...

  3. pacakge-info.java

    翻看以前的笔记,看到一个特殊的java文件:pacakge-info.java,虽然有记录,但是不全,就尝试着追踪一下该问题, 分享一下流水账式的结果. 首先,它不能随便被创建.在Eclipse中, ...

  4. Web Deploy远程部署配置图解

    原文链接:https://jingyan.baidu.com/album/642c9d34e614de644a46f783.html

  5. （4.6）mysql备份还原——深入解析二进制日志（2）binlog参数配置解析

    关键词:binlog配置,binlog参数,二进制日志配置,二进制文件参数配置 关键词:binlog缓存,binlog 刷新 0.bin写入流程 写binlog流程如下:# 数据操作buffer po ...

  6. 如何将文章列表用<li>分两列显示

    我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们? 其实相对比较简单,用几行css样式定义一下就够了,可以用div + css来控制 ...

  7. UIBezierPath使用

    效果图,Demo的例子是我自己做的,下面曲线的代码是从别处copy过来的 copy地址 -(void)touchesBegan:(NSSet<UITouch *> *)touches wi ...

  8. windows无法安装到这个磁盘。选中的磁盘采用GPT分区形式 Windows 检测到 EFI 系统分区格式化为 NTFS。将 EFI 系统分区个数化为 FAT32，然后重新启动安装

    win10安装问题解决 问题 1.windows无法安装到这个磁盘.选中的磁盘采用GPT分区形式 解决方法: 1.bios,更改 uefi/legacy boot 为ueei only 后面可以安装了 ...

  9. 【CART与GBDT】

    一.CART(分类回归树)    1.思想:     一种采用基尼信息增益作为划分属性的二叉决策树.基尼指数越小,表示纯度越高.  2.回归: 每个节点都有一个预测值,预测值等于属于该节点的所有样例的 ...

  10. JS 8-3 prototype属性

    动态修改Student.prototype的属性时,会影响已创建或将要创建的实例. 如果将整个Student.prototype赋值为新的对象,对已经创建的实例是不会修改的,会影响后续创建的实例. n ...