问题:效果受局限

解决:万能动画函数: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面向对象高级：枚举

    在数学和计算机科学理论中,一个集的枚举是列出某些有穷序列集的所有成员的程序,或者是一种特定类型对象的计数.这两种类型经常(但不总是)重叠. 枚举是一个被命名的整型常数的集合,枚举在日常生活中很常见,例 ...

  2. 扒来的lstdc++.6.0.9有效解决方案

    找到了Xcode10模拟器和真机运行的办法了1.将libstdc++_sim.zip解压,放到目录 /Applications/Xcode.app/Contents/Developer/Platfor ...

  3. python,re模块正则

    python没有正则需要导入re模块调用.正则表达式是为了匹配字符串,动态模糊的匹配,只要有返回就匹配到了, 没返回就没匹配到,前面是格式后面是字符串 最常用的匹配语法: re.match()#麦驰, ...

  4. 50 行代码教你爬取猫眼电影 TOP100 榜所有信息

    对于Python初学者来说,爬虫技能是应该是最好入门,也是最能够有让自己有成就感的,今天,恋习Python的手把手系列,手把手教你入门Python爬虫,爬取猫眼电影TOP100榜信息,将涉及到基础爬虫 ...

  5. MonkeyRunner_真机_运行脚本(二)

    # -*- coding: UTF-8 -*- #手机分辨率为1080*1920 import sys from com.android.monkeyrunner import MonkeyRunne ...

  6. linux 模拟发http请求的例子

    curl -X POST --header "Content-Type: application/json" --header "Accept: */*" &q ...

  7. 关于jquery中on绑定click事件在苹果手机失效的问题

    用一个div当做了一个按钮来使用. <div class="button"> <div class=" next_button button_left ...

  8. svn .a文件上传不了

    最近mac电脑出现了问题,导致硬盘被格式化,所有文件都没了,打开app,一直缺少第三方文件libWeChatSDK.a,打开xcode文件变红了,找不到了,为了预防此类问题,在这里给出解决方法,如果没 ...

  9. 报错解决——Disconnected:No supported authentication methods available

    该问题是由于ssh链接未允许远程密码认证导致的 解决方法 通过管理控制台进入系统,查看 /etc/ssh/sshd_config配置文件中是否包含以下配置 PasswordAuthentication ...

  10. node学习系列 搭建express

    搭建express express官网API http://expressjs.com/zh-cn/ 1.在文件夹下新建一个packages.json文件 内容为: {} 然后执行 yarn add ...