For a long time in the past, various special effects on web pages still needed to be performed using flash. But in recent years, we have rarely seen this situation, and most of them have used JavaScript animation effects to replace flash. The replacement mentioned here is the special effects part of the web page, not the animation. Web page special effects such as: gradient menu, progressive display, picture carousel, etc.; and animation such as: storyline advertising, MV, etc.
If you copy the current code for local testing, please be careful to comment out the code that is not needed (for display of other functions).
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.11.2.js"></script>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background-color: red;
position:absolute;
}
#pox {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 200px;
}
</style>
</head>
<body>
<input type="button" class="button" value="开始" /><input type="button" class="stop" value="停止" />
<input type="button" class="ani" value="查找运动中的动画" />
<div id="box">box</div>
<div id="pox">pox</div>
</body>
</html>
<script type="text/javascript">
$(function () {
$(".button").click(function () {
$("#box").animate({
left: "300px" //要想使用left top bottom right这种方向性的属性 先必须对"#box元素设置CSS 绝对定位
})
})
//自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。
$(".button").click(function () {
$("#box").animate({
left: "+=50px" //每点击一次.button按钮，#box元素就往左移动50px
})
})
//-------------------------------------同步动画
//一个CSS 变化就是一个动画效果，下面的例子中，已经有四个CSS 变化（分别是width，height，opacity，fontSize的变化）实现了多重动画同步运动的效果。（所谓多重同步运动的效果就是，这四个css属性的值在同一时间，同时变化）
$(".button").click(function () {
$("#box").animate({
width: "300px",
height: "200px",
opacity:0.5, //透明度为0.5 注：透明度的值在0-1之间
fontSize:"200px", //字体大小设为30px
}) //第一个参数：是一个对象，他是键值对的css
})
//--------------------------------------列队动画
//通过回调函数现实队列动画。（效果就是：首先#box的宽度变为300px 然后高度变为200px,然后透明度变为50%，字体大小变为150px 最后弹出一个“完毕”）
$(".button").click(function () {
$("#box").animate({ width: "300px"}, 1000, function(){
$("#box").animate({height:"200px"},1000,function(){
$("#box").animate({opacity:0.5},1000,function(){
$("#box").animate({fontSize:"150px"},1000,function(){alert("完毕")})
});
});
});
})
//在同一个元素的基础上，使用链式调用也可以实现列队动画
$(".button").click(function () {
$("#box")
.animate({ width: "300px" }, 1000)
.animate({ height: "200px" }, 1000)
.animate({ opacity: 0.5 }, 1000)
.animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")})
});
//在同一个元素的基础上，通过依次顺序实现列队动画 (如果有多个元素则不能实现，两个元素之间的动画是同步的。)
$(".button").click(function () {
$("#box").animate({ width: "300px" }, 1000);
$("#box").animate({ height: "200px" }, 1000);
$("#box").animate({ opacity: 0.5 }, 1000);
$("#box").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")});
})
//如果有多个元素则不能实现 不信请看下面代码 (通过执行下面这段代码，我们发现#box 与#pox这两个元素的动画是同时执行的，属于#box的那两段动画是先执行 $("#box").animate({ width: "300px" }, 1000)然后再执行("#box").animate({ opacity: 0.5 }, 1000); 他们两个有列队动画的效果) 而属于#pox的两段动画是先执行 $("#pox").animate({ height: "200px" }, 1000)然后再执行 $("#pox").animate({ fontSize: "150px" }, 1000)他们两个有列队动画的效果。 但是 $("#box").animate({ width: "300px" }, 1000)与$("#pox").animate({ height: "200px" }, 1000); 同时执行的。 $("#box").animate({ opacity: 0.5 }, 1000)与$("#pox").animate({ fontSize: "150px" }, 1000)是同时执行的。
//前面说了这么一大堆 其实就是：
//#box的第一条和第三条是列队动画
//#pox的第二条和第四条是列队动画
//#box的第一条和#pox的第二条是同步动画
//#box的第三条和#pox的第四条是同步动画
$(".button").click(function () {
$("#box").animate({ width: "300px" }, 1000);
$("#pox").animate({ height: "200px" }, 1000);
$("#box").animate({ opacity: 0.5 }, 1000);
$("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")});
})
//那我们现在的需求是：不管你有几个元素，我都要他们依次实现列队动画效果。(测试了一下，只能用这种回调函数嵌套的方式来实现了)
$(".button").click(function () {
$("#box").animate({ width: "300px" }, 1000, function () {
$("#pox").animate({ height: "200px" }, 1000, function () {
$("#box").animate({ height: "200px"}, 1000, function () {
$("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕") });
})
})
})
})
// ---------------------------------动画与非动画 进行队列 【queue()】
//我们知道动画可以有列队效果。但是一个普通的css（比如改变背景颜色）如果实现与动画进行列队呢？
$(".button").click(function () {
$("#box").slideUp(1000).slideDown(1000).css("background", "yellow")
})
//本来我们是想要实现队列动画的，也就是先让#box滑动隐藏，然后再让它滑动显示，最后让它改变颜色。可是我们运行这段呢代码，我们看到第一时间就执行了css("background","yellow")这段代码。
//通过上面的代码我们了解到 css()方法不是动画方法，会和第一个动画同时执行。也就是说非动画不能列队。
//现在问题又来了。我现在想要实现列队动画，也想非动画和动画一起列队怎么办呢？ 其实我们可以使用回调函数实现的。请看下面的代码
$(".button").click(function () {
$("#box")
.slideUp(1000)
.slideDown(1000, function () { $(this).css("background", "yellow") })
.hide(3000);
})
//但如果上面这样的话，当列队动画繁多的时候，可读性不但下降，而原本的动画方法不够清晰。所以，我们的想法是每个操作都是自己独立的方法。那么jQuery 提供了一个类似于回调函数的方法：.queue()
$(".button").click(function () { //三个动画。
$("#box")
.slideUp(1000)
.slideDown(1000)
.queue(function () { $(this).css("background", "yellow");})
})
//现在，我们想继续在.queue()方法后面再增加一个隐藏动画，这时发现居然无法实现。这是.queue()特性导致的。有两种方法可以解决这个问题，jQuery 的.queue()的回调函数可以传递一个参数，这个参数是next 函数，在结尾处调用这个next()方法即可再链式执行列队动画。
//链式编程实现队列动画
$(".button").click(function () { //四个动画
$("#box")
.slideUp(1000)
.slideDown(1000)
.queue(function (next) { //这个next是一个函数
$(this).css("background", "yellow");
next();})
.hide(1000);
});
//顺序编程实现队列动画 我们看到使用顺序调用的列队，逐个执行，非常清晰
$(".button").click(function () {
$("#box").slideUp(1000);
$("#box").slideDown(1000);
$("#box").queue(function (next) {
$(this).css("background", "yellow");
next(); });
$("#box").hide(1000);
});
//因为next 函数是jQuery1.4 版本以后才出现的，而之前我们普遍使用的是.dequeue()方法。意思为执行下一个元素列队中的函数。
//使用.dequeue()方法执行下一个函数动画
//$(".button").click(function () {
// $('#box').slideUp('slow').slideDown('slow').queue(function () {
// $(this).css('background', 'orange');
// $(this).dequeue(); //相当于上面的那句next() 只是这里的function（）括号里不像上面那样需要传递一个next函数
// }).hide(1000)
//});
//-----------------------------动画的清除 【clearQueue()】
//jQuery 还提供了一个清理列队的功能方法：.clearQueue()。把它放入一个列队的回调函 数或.queue()方法里，就可以把剩下为执行的列队给移除。
//清理动画列队
//假如我想在执行完第二个动画那就就不再执行了。那么只要在第二个动画的回调函数哪里添加一句$(this).clearQueue()就可以停止后面的列队动画了
$(".button").click(function () {
$("#box")
.slideUp(1000)
.slideDown(1000, function () { $(this).clearQueue() })
.queue(function (next) { $(this).css("background", "yellow"); next() })
.hide(1000);
})
//那么如果获取列队动画的长度呢？
function getQueueCount() {
return $("#box").queue("fx").length; //获取当前列队的长度，fx 是默认列队的参数
}
//用法
$(".button").click(function () {
//下面这段代码总共有slideUp，slideDown，queue，hide这四个动画
$("#box")
.slideUp(1000, function () { alert(getQueueCount()) }) //执行到这一步的时候会打印出：4 它后面还有三个动画，所以下一步的时候会打印出3
.slideDown(1000, function () { alert(getQueueCount()) }) //执行到这一步的时候会打印出：3
.queue(function (next) { alert(getQueueCount()); $(this).css("background", "yellow"); next() }) //执行到这一步的时候会打印出：2
.hide(1000, function () { alert(getQueueCount()) }); //执行到这一步的时候会打印出：1
});
//---------------------------------动画的停止【stop()】
//很多时候需要停止正在运行中的动画，jQuery 为此提供了一个.stop()方法。它有两个可选参数：.stop(clearQueue, gotoEnd)；clearQueue 传递一个布尔值，代表是否清空未执行完的动画列队，gotoEnd 代表是否直接将正在执行的动画跳转到末状态。
$(".button").click(function () {
$("#box")
.animate({left:"1000px"} ,3000)
})
$(".stop").click(function () {
$("#box").stop(); //将#box这个元素的动画停止掉。没有参数的stop()方法只是单纯的停止动画
})
//那下面再来了解下，列队动画的停止
$(".button").click(function () {
$("#box").animate({ left: "300px" },1000)
.animate({ bottom: "300px" }, 1000)
.animate({ width: "300px" }, 1000)
.animate({ height: "300px" }, 1000)
})
//$(".stop").click(function () {
// $("#box").stop(); // 如果用没有参数的stop()方法去停止有列队动画，那么只会停止掉第一个列队动画，后面的列队动画会继续执行。
//})
//那么现在我想当我点击停止按钮的时候，我就需要整个将列队动画停止下来，而不是仅仅停止第一个，怎么办呢？ 答案是：我们可以给stop()方法加参数
//stop()方法有两个可选参数：
//第一个可选参数，如果为true，就代表停止并清除掉后面的队列动画。即：动画完全停止（默认值为false）
//第二个可选参数，如果为true，就代表停止并清除掉后面的队列动画，并且当前动画会立刻跳转到当前这条动画执行完毕的末尾位置（默认为false）
$(".stop").click(function () { $("#box").stop(true, true); })
//--------------------------------动画的延迟【delay（）】
$(".button").click(function () {
$("#box").delay(2000) //如果delay(2000) 直接写在$("#box")元素后面，就表示延迟2秒再执行动画
.animate({ left: "300px" }, 1000)
.animate({ bottom: "300px" }, 1000)
.animate({ width: "300px" }, 1000).delay(3000) // 写在这里表示等animate({ width: "300px" }, 1000)这段代码执行完后，延迟3秒再执行下面的代码
.animate({ height: "300px" }, 1000)
})
//-----------------------------------获取当前正在执行的动画 【:animated 过滤器】
$(".button").click(function () {
//$("#box").slideUp(1000, function abc() {
// $(this).slideToggle(1000, abc); //无限循环的调用自己。实现动画不停的执行。
//})
//或者用这以下这种方式也可以实现 动画不停的自执行
$("#box").slideToggle(1000, function () {
$(this).slideToggle(1000, arguments.callee); //arguments.callee表示调用自身。 和上面那一句是一样的
})
})
$(".ani").click(function () {
$(":animated").css("background", "blue").stop(true); //获取当前正在执行的动画，并将它的颜色改为蓝色后停止动画的执行
})
//---------------------动画的全局属性【$.fx.off属性可以关闭页面上所有的动画】【$.fx.interval属性可以调整动画每秒运行的帧数】
//$.fx.interval 属性用于设置jQuery动画每隔多少毫秒绘制一帧图像 (默认为13 毫秒) 数字越小越流畅，但可能影响浏览器性能。
//$.fx.interval = 100; // 设置动画绘制一帧帧的时间为100毫秒，（默认是13毫秒）
//$.fx.off = true; //关闭页面上所有的动画
//补充：在.animate()方法中，还有一个参数，easing 运动方式，这个参数，大部分参数值需要通过插件来使用，在后面的课程中，会详细讲解。自带的参数有两个：swing(缓动)、linear(匀速)，默认为swing。
$('.button').click(function () {
$('#box').animate({ left: '800px' }, 1000, 'swing'); //swing 表示缓动运行，缓速运动有个特点，就是刚开始运行的慢，到了中间就比较快，最后又慢下来（中间快，两头慢） 整段代码的意思就是在1秒钟内 以缓动方式运行动画
$('#pox').animate({ left: '800px' }, 1000, 'linear'); //linear表示匀速运行，速度一直不变 整段代码的意思就是在1秒钟内 以匀速方式运行动画
});
});
</script>
The above article is about in-depth understanding of jquery custom animation animate(). This is all the content shared by the editor. I hope it can give you a reference, and I hope you will learn more. Support PHP Chinese website.
For more in-depth understanding of jquery custom animation animate() related articles, please pay attention to the PHP Chinese website!
Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AMDetailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi
Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AMSo here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J
10 jQuery Fun and Games PluginsMar 08, 2025 am 12:42 AM10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game
How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PMArticle discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.
jQuery Parallax Tutorial - Animated Header BackgroundMar 08, 2025 am 12:39 AMThis tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the
Getting Started With Matter.js: IntroductionMar 08, 2025 am 12:53 AMMatter.js is a 2D rigid body physics engine written in JavaScript. This library can help you easily simulate 2D physics in your browser. It provides many features, such as the ability to create rigid bodies and assign physical properties such as mass, area, or density. You can also simulate different types of collisions and forces, such as gravity friction. Matter.js supports all mainstream browsers. Additionally, it is suitable for mobile devices as it detects touches and is responsive. All of these features make it worth your time to learn how to use the engine, as this makes it easy to create a physics-based 2D game or simulation. In this tutorial, I will cover the basics of this library, including its installation and usage, and provide a
Auto Refresh Div Content Using jQuery and AJAXMar 08, 2025 am 12:58 AMThis article demonstrates how to automatically refresh a div's content every 5 seconds using jQuery and AJAX. The example fetches and displays the latest blog posts from an RSS feed, along with the last refresh timestamp. A loading image is optiona
How do I optimize JavaScript code for performance in the browser?Mar 18, 2025 pm 03:14 PMThe article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
WebStorm Mac version
Useful JavaScript development tools
Notepad++7.3.1
Easy-to-use and free code editor
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
