• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery animate和CSS3相结合实现缓动追逐效果附源码下载

jQuery animate和CSS3相结合实现缓动追逐效果附源码下载

作者:ljiong 字体:[增加 减小] 来源:互联网

ljiong 通过本文主要向大家介绍了jquery_animate缓动,css3缓动等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

CSS3和jquery都可以实现缓动追逐效果,但是考虑到浏览器的兼容性,建议使用jquery animate方法来实现。

先给大家展示下实现效果如下:

效果演示        源码下载

引用文件: jquery-1.11.1.min.js

html

<div id="container">
<div id="first"></div>
<div id="second"></div>
</div>

jquery

var $first=$('#first');
var $second=$('#second');
(function(){
move1();
move2();
})()
function move1(){
$first.animate({
"left":220,
"top": 0
},400).animate({
"left":220,
"top":220
},400).animate({
"left":0,
"top":220
},400).animate({
"left":0,
"top":0
},function(){
move1();
})
}
function move2(){
$second.animate({
"right":220,
"bottom": 0
},400).animate({
"right":220,
"bottom":220
},400).animate({
"right":0,
"bottom":220
},400).animate({
"right":0,
"bottom":0
},function(){
move2();
})
}

以上所述是小编给大家介绍的jQuery animate和CSS3相结合实现缓动追逐效果,希望对大家有所帮助!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery animate和CSS3相结合实现缓动追逐效果附源码下载

相关文章

  • Jquery基础之事件操作详解
  • jQuery常用且重要方法汇总
  • 基于JQuery的一个简单的鼠标跟随提示效果
  • 深入理解Jquery表单验证(使用formValidator)
  • 基于jQuery实现放大镜效果
  • jQuery图片切换动画效果
  • Jquery针对tr td的一些实用操作方法(必看篇)
  • jquery处理json对象
  • Jquery判断IE6等浏览器的代码
  • JQuery包裹DOM节点的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery仅用3行代码实现的显示与隐藏功能完整实例
    • jQuery Mobile弹出窗、弹出层知识汇总
    • jQuery中each()方法用法实例
    • jQuery在ul中显示某个li索引号的方法
    • jquery下jstree简单应用 - v1.0
    • 在UpdatePanel内jquery easyui效果失效的解决方法
    • jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
    • 『jQuery』.html(),.text()和.val()的概述及使用
    • Jquery 扩展方法
    • jQuery实现的简单排序功能示例【冒泡排序】

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有