老规矩，先贴代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/jquery.js"></script>

    </head>

<style>

body{font-family: "微软雅黑";width: 980px; margin: 0 auto; text-align: center;}

    .box{

        width: 200px;

        height: 200px;

        background: #e9e9e9;

        border: 1px solid #e6e6e6;

        margin-top: 50px;

        line-height: 200px;

        position: absolute;

    }

button{

    border: none;

    background: green;

    width: 100px;

    height: 50px;

    line-height: 50px;

    color: #fff;

    font-size: 16px;

    }

</style>

    <body>

        <button>点击开始动画</button>

        <div class="box" >

            Hello!你好

        </div>

        <script>

            $(document).ready(function(){

                $("button").click(function(){

                    $(".box").animate({

                        right:'150px',

                    });

                });

            });

        </script>

    </body>

</html>

先是 作出了 简单的 滑块向右滑动了  150px 的  JQ 代码

要点：

1、事件按钮的选择，并且与click 点击事件 函数相连接 起来

2、节点的选择。在上述的例子中就是 “.box”

3、滑块的 css 属性当中 必须有 position 的 属性值在里面 才能 配合 这个 animate（）；运动起来

接下来 再 写一个 稍微复杂一点的效果

jQuery animate() - 使用队列功能

明天再贴代码，小冰子君已经玩儿嗨了...

今天讲的是JQ 的动画效果的更多相关文章

  1. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  2. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  3. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  4. JQuery图片切换动画效果

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

  5. jQuery演示8种不同的图片遮罩层动画效果

    效果预览 下载地址 jQuery插件大全 实例代码 <div class="container"> <h1>jQuery图标和文章动画效果</h1&g ...

  6. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  7. 基于canvas实现物理运动效果与动画效果(一)

    一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...

  8. 运动曲线提升CSS动画效果

    原文链接 译文\译者鞠大宝 先有UI动画,然后才会有好的UI动画.好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅.很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板.如果你经常逛Dr ...

  9. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

随机推荐

  1. python3 连接SQLserver

    pymssql 是Python语言用来连接微软 SQL SERVER 数据库的类库,实现了 Python DB API 2.0 .官网介绍. 最简事例: #!/usr/bin/env python # ...

  2. js-JavaScript高级程序设计学习笔记7

    第十一章 DOM扩展 1.对DOM的两个主要的扩展是Selectors API(选择符API)和HTML5. 2.jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getE ...

  3. 【BZOJ-2299】向量 裴蜀定理 + 最大公约数

    2299: [HAOI2011]向量 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1118  Solved: 488[Submit][Status] ...

  4. GitHub Pages和每个项目绑定自定义域名（支持多个和顶级域名）

    假设我购买的域名为www.easonjim.com,想把www.easonjim.com和easonjim.com的域名跳转到下面的网址easonjim.github.io. 而我在github上的账 ...

  5. hdu 2857 求点关于线段的对称点

    本来很简单的一个题,但是有个大坑: 因为模板中Tline用到了直线的一般方程ax+by+c=0,所以有种很坑的情况需要特判: 斜率不存在啊喂 老子坑了一下午2333 #include <math ...

  6. bzoj1535[POI2005]sza-template

    此题解无病呻吟,啰里啰嗦,现已加入零分作文全家桶 这题......坑死我了...... 不妨记原串长为i的前缀为prefix(i),next[i]表示prefix(i)的最长公共前后缀长度(不等于pr ...

  7. app 摇一摇功能

    1.重写canBecomeFirstResponder ,并返回YES -(BOOL)canBecomeFirstResponder{ return YES; } 2.重写UIResponder的三个 ...

  8. phpMyadmin /scripts/setup.php Execute Arbitrary PHP Code Via unserialize Vul Object Injection PMASA-2010-4

    目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 对这个漏洞简单的概括如下 . "/scripts/setup.php&q ...

  9. 远程连接RabbitMQ失败

    远程连接RabbitMQ失败 为了避免污染宿主系统环境,于是在虚拟机中搭建了一个linux环境并且按照了rabbitmq-server.然后在远程连接的时候一直连接失败. 官网上面给的例子都是在本地使 ...

  10. 北京地铁站点遍历最少经站次数问题普遍意义上是一个NP问题，目前不存在多项式时间算法能够解决该问题

    http://www.cnblogs.com/jiel/p/5852591.html 众所周知求一个图的哈密顿回路是一个NPC问题: In the mathematical field of grap ...