jQuery 动画基础教程

注意此代码需要用到jquery的js文件，才可以用所以大家可以先下载一个jquery文件，注意调用路径。
代码：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery动画基础</title>
<script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
<style type="text/css">
.theImage{
position:relative;
background:Green;
width:100px;
}
</style>
<script type="text/javascript">
$(function(){
$("#btnShow").click(function(){
//$("#block").show(1000);//没有参数则没有动画效果
//$("#block").fadeIn("slow");//根据透明度显示或隐藏
$("#block").slideDown();//拉下来。只改变高度
});
$("#btnHide").click(function(){
//$("#block").hide("normal");//slow,normal,fast
//$("#block").fadeOut(5000);
$("#block").slideUp();
});

//自定义动画
$("#btnImage").click(function(){
$("#imageDiv").animate(
//I
//移动到的位置,这里的位置是相对与原来的位置
//top即相对原来的位置向上移动多少距离,没搞明白,结果是向下移动了。
//{left:"400px",top:"100px"},
//3000
//II
{left:"+=50",width:"300px",height:"200px"},//改变位置的同时改变宽度高度
3000
);
});
//同时执行两个动画，执行完一个，然后接着执行另一个。
$("#btnImage").click(function(){
$("#imageDiv").animate(
{left:"100px",width:"30px",height:"20px"},
3000,
function(){alert('callback函数');}//动画结束后要执行的函数
);
});
});
</script>
</head>
<body>
<div>
<button id="btnShow"> Show</button>
<button id="btnHide">Hide</button>
<div id="block" style="background:#369; width:150px; height:100px; ">Hello!</div>
<button id="btnImage">moveImage</button>
<div id="imageDiv" class="theImage">image</div>
<div>hi</div>
</div>
</body>
</html>

赞 (0)

相关推荐

  • JS动画效果代码3

    慢慢来,这次实现了向任意方向扩展! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  &l

  • javascript 小型动画组件与实现代码

    做一个普通的动画效果,js是怎么完成的呢.看一下例子 复制代码 代码如下: setInterval(function(){ element.style.left =parseFloat(element.style.left) +(n) +'px'; },10); test var element = document.getElementById("test2"); setInterval(function(){ element.style.left =parseFloat(eleme

  • javascript基础的动画教程，直观易懂

    直接点击观看,可以下载http://cimg.163.com/tech/netSchool/dreamweaverFIF/5_1.swfhttp://cimg.163.com/tech/netSchool/dreamweaverFIF/5_2.swfhttp://cimg.163.com/tech/netSchool/dreamweaverFIF/5_3.swfhttp://cimg.163.com/tech/netSchool/dreamweaverFIF/5_4a.swfhttp://cim

  • 用一段js程序来实现动画功能

    自从ie对flash的显示方式进行改变后,flash这个东西一下子变成了一个鸡肋. 许许多多的网站都撤掉了以前的flash动画,改用一段js程序来实现动画功能. csdn首页也是如此..我无聊,自己写了一个,特点如下: 1.对搜索引擎友好 2.对美工友好,因为数据和代码是分开的,完全不懂js的都可以用fontpage修改动画内容 可以把js代码保存为一个文件 然后<script src="1.js"></script>,然后无须修改代码一个字母 就可以在多个页面

  • javascript动画效果类封装代码

    <input id=output3 style="position:absolute;top:300;left:300;"/> <input id=output1 /> <input id=output2 /> <br/> <input id=output4 /> <script> function Animation(target,targetProperty,closure,precision) {   clo

  • JS动画效果代码2

    Untitled Document function $(pId){ return document.getElementById(pId); } function JPos(){ } JPos.getAbsPos = function(pTarget){ var _x = 0; var _y = 0; while(pTarget.offsetParent){ _x += pTarget.offsetLeft; _y += pTarget.offsetTop; pTarget = pTarget

  • jQuery 动画基础教程

    注意此代码需要用到jquery的js文件,才可以用所以大家可以先下载一个jquery文件,注意调用路径.代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

  • Jquery ajax基础教程

    jQuery的Ajax带来了无需刷新的web页面革命.这里就详细介绍一下jQuery所涉及到的Ajax操作.(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数据 这里的请求通常都是网页的某些操作,如点击等. 而其加载数据的类型归类为以下四种:a.加载HTML文件:b.加载JSON文件:c.加载Javascript文件:d.加载XML文件. 其对应的四种加载方法分别是:load.getJSON.getScript.get. a.加载HTML文件 把编写好的

  • JQuery 常用方法基础教程

    $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("t

  • jQuery动画特效实例教程

    jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法.分享给大家供大家参考之用.具体方法如下: 1.自制折叠内容块 内容块如下: <div class="module"> <div class="caption"> <span>标题</span> <img src="rollup.gif" alt="rollup" title="rolls up this mo

  • jQuery动画效果实现图片无缝连续滚动

    jQuery动画效果实现图片无缝连续滚动

    本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 <body> <div id="container"> <ul id="content"> <li><a href="#"><img src="images/0.png"/></a></li> <

  • 整理的40个有用的jQuery技术和教程

    整理的40个有用的jQuery技术和教程

    1. Custom Animation Banner with jQuery 在该教程中你将学会如何使用jQuery的Easing插件及2D Transform插件创建自定义的动画横幅.教程的想法是将不同的元素以自定义动画的形式融入到横幅中去. 查看实例 2. Moving Boxes Carousel with jQuery 你将学会如何创建一个拥有改变面板及缩放面板的按钮的滑块. 查看实例 3. Quick Feedback Form – jQuery & PHP 通过jQuery和PHP实

  • jQuery中文入门指南，翻译加实例，jQuery的起点教程

    jQuery中文入门指南,翻译加实例,jQuery的起点教程 中文版译者:Keel 此文以实例为基础一步步说明了jQuery的工作方式.现以中文翻译(添加我的补充说明)如下.如有相关意见或建议请麻烦到我的 BLOG 写个回复或者 EMAIL 告知. 英文原版:http://jquery.bassistance.de/jquery-getting-started.html ,感谢原文作者 Jörn Zaefferer 本文发布已征求原作者同意. 另外我认为在学习过程中,有两个API文档你要打开随时

  • Vue全家桶入门基础教程

    Vue全家桶入门基础教程

    1. Vue概述 Vue(读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. 渐进式: 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 可以使用其中的一个或者多个 优点: 易用:熟悉HTML,CSS.JavaScript知识后,可快速上手Vue 灵活:在一个库和一套完整框架之间自如伸缩 高效:20kB运行大小,超快虚拟DOM 2. Vue的基本使用 2.1 传统开发模式对比 /

  • ASP.NET CORE基础教程

    ASP.NET CORE基础教程

    目录 第一课 基本概念 第二课 控制器的介绍 第三课 视图与表单 第四课 数据验证 第五课 路由规则 第六课 应用发布与部署 源码地址 第一课 基本概念 基本概念 Asp.Net Core Mvc是.NET Core平台下的一种Web应用开发框架 符合Web应用特点 .NET Core跨平台解决方案 MVC设计模式的一种实现 环境准备 安装最新版Visual Studio 2017 安装最新版.NET Core Sdk 第二课 控制器的介绍 控制器定义方式: 命名以Controller结尾 使用

  • jQuery动画出现连续触发、滞后反复执行的解决方法

    本文实例讲述了jQuery动画出现连续触发.滞后反复执行的解决方法.分享给大家供大家参考.具体分析如下: jQuery中slideUp .slideDown.animate等动画运用时,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,其表现不雅. 则解决办法: 1.在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题(使用setTimeout) 2.在触发元素的事件时预先停止所有的动画,再执行相应的动画事件(使用stop) jquery sto

随机推荐