问题:效果受局限

解决:万能动画函数: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. jvisualvm All-in-One Java Troubleshooting Tool

    java 监控.故障.性能可视化分析 VisualVM: Download https://visualvm.github.io/download.html All-in-One Java Troub ...

  2. 免费SSL证书Let's Encrypt(certbot)安装使用教程

    免费SSL证书Let's Encrypt(certbot)安装使用教程 https://www.vpser.net/build/letsencrypt-certbot.html

  3. [knowledge][http] http

    关于,底层承载协议的规定. HTTP communication usually takes place over TCP/IP connections. The [], but other port ...

  4. Java8 in action

    解决的问题: behavior parameterization,即可以把一段code,逻辑作为参数传入: 这样做的目的,当然为了代码抽象和重用,把变化的逻辑抽象出去: 在java中,如果要实现beh ...

  5. 状压dp的另一种形式

    做的那么多都是一些比较怎么说呢,都是在数网格一类的题目之中,这些题目有些有点固定的套路,而一些需要状态压缩的题目呢,则么是真正对状态转移的考验. 这道题呢,被彻底打脸了,以后一定要任性一点一道题做不出 ...

  6. LeetCode 892 Surface Area of 3D Shapes 解题报告

    题目要求 On a N * N grid, we place some 1 * 1 * 1 cubes. Each value v = grid[i][j] represents a tower of ...

  7. VPS常用操作（自用）

    1.screen  用来开启进程,关闭ssh或命令行后扔可以继续运行 screen screen -list screen -r xx screen -S PID -X quit 2.mono asf ...

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

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

  9. 【PyQt5-Qt Designer】工具箱(QToolBox)控件的使用

    工具箱(QToolBox)+toolButton+tabWidget 总体介绍 QToolBox类提供了一列选项卡的小部件(选项卡内含项目). 工具箱是一个小部件,它将选项卡一个一个的显示,当前项目显 ...

  10. SpringBoot-整合多数据源

    整合多数据源 这里有两种,分包数据源和注解数据源,这里讲分包数据源 配置文件中新增两个数据源 spring.datasource.test1.driverClassName = com.mysql.j ...