jquery animation effect study notes (8 effects)_jquery
May 16, 2016 pm 03:32 PM
1. Showing and hiding elements
- display:none; hide
- display:block; display
Easy to show and hide methods
- a) show() show
- b) hide() hide
- c) toggle() switch, show to hide, hide to show
<script type="text/javascript">
function f1(){
//隱藏
$("div").hide();//display:none
//document.getElementById('id').style.display="none";
}
function f2(){
//顯示
$("div").show();//display:block
}
function f3(){
$("div").toggle();
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div>duck and dog</div>
<input type="button" value="隱藏" onclick="f1()" />
<input type="button" value="顯示" onclick="f2()" />
<input type="button" value="開關(guān)效果" onclick="f3()" />
</body>
CSS supports two methods of displaying and hiding elements, namely using visibility or display styles. They have the same effect when controlling the display and hiding of elements, but the results are different.
The specific instructions are as follows:
- When hiding an element, the visibility attribute will also save the influence of the element in the document flow, and the unknown of the element will remain unchanged after hiding. This attribute includes two values: visible (default) and hidden.
- After display is hidden, the hidden elements no longer occupy the position of the document.
2. Show and hide sliding effect
- slideUp(speed[,callback]) slides the element up and eventually hides it
- slideDown(speed[,callback]) slides the element down and finally displays
- slideToggle(speed[,callback])
Speed: Set the speed of the effect (slow (600) normal (400) fast (200) time (milliseconds))
Callback: Callback function automatically called after the effect is executed
<script type="text/javascript">
function f1(){
//隱藏
$("div").slideUp(3000,function(){
alert('我消失了，你能看到么');
});
}
function f2(){
//顯示
$("div").slideDown(3000,function(){
alert('我又回來(lái)了');
});//display:block
}
function f3(){
$("div").slideToggle(1000);
}
$(function(){
//氣缸滑動(dòng)效果
//setInterval("f3()",1000);
});
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div>duck and dog</div>
<input type="button" value="隱藏" onclick="f1()" />
<input type="button" value="顯示" onclick="f2()" />
<input type="button" value="開關(guān)效果" onclick="f3()" />
</body>
3. Fade effect
Allow elements to display and hide through certain transparency changes
- fadeIn(speed, [callback])
- fadeOut(speed, [callback])
- fadeToggle(speed, [callback]) switch effect
- fadeTo(speed, opacity, [callback]) sets the div to a certain transparency (0-1) 0.3 is 30% transparency
<script type="text/javascript">
function f1(){
//隱藏
$("div").fadeOut(4000);
}
function f2(){
//顯示
$("div").fadeIn(4000);
$("#two").fadeTo(2000,0.3);
}
function f3(){
$("div").fadeToggle(2000);
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div id = "two">duck and dog</div>
<input type="button" value="隱藏" onclick="f1()" />
<input type="button" value="顯示" onclick="f2()" />
<input type="button" value="開關(guān)效果" onclick="f3()" />
</body>
Set transparency, the transparency of div is 30%:
4. The underlying method of animation effect animate()
show() hide() and other animation effects internally execute the animate() method
$().animate(css效果參數(shù)[，時(shí)間][，回調(diào)函數(shù)]);
General jquery methods such as css() will return the current jquery object after execution, so many jquery methods can be called in a chain.
<script type="text/javascript">
function f1(){
//文字大小、文字粗體、div本身寬度和高度
//font-size background-color color
console.log($("div"));
//jquery對(duì)象調(diào)用完畢css方法本身還是一個(gè)jquery對(duì)象
//說(shuō)明css方法執(zhí)行完畢有return this關(guān)鍵字
console.log($("div").css('font-weight','bold').css("background-color",'pink'));
var jn = {'font-size':'30px',width:'400px',height:'300px'};
$("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);
//$("div").animate(jn,2000);
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue; }
</style>
<body>
<div>duck and dog</div>
<input type="button" value="設(shè)置" onclick="f1()" />
</body>
5. Accumulation and subtraction animation
If the animation is set to left: 500 at a time, the first click on the div will move 500 pixels to the left, and the second click will not move. Accumulation, accumulation and subtraction are continuous movements. Just change left: "500px" to left: " =500px" or left: "-=500px".
(function(){
$("#panel").click(function(){
$(this).animate({left: "+=500px"}, 3000);
})
})</span>
6. Multiple animations
1. Execute multiple animations at the same time
The above example only controls the change of the left attribute. This time when we control the left attribute, we also control the height of the element to 200px
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px",height:"200px"}, 3000);
})
})
2. Execute animations sequentially
In the above example, the two animations of moving the element to the right and enlarging the height are performed simultaneously. Now we need to move right first and then enlarge the height. It is very simple. We only need to split the animate() method above and write it into two
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px"},3000)
.animate({height:"200px"},1000);
})
})
3. Comprehensive animation
More complex animations are done next. Click on the div element to move it to the right while increasing its height and switching its opacity from 50% to 100%. Then let it move from top to bottom while its width becomes larger. When this is completed
After some effects, it will be hidden by fading out.
$(function(){
$("#panel").css("opacity",0.5);//設(shè)置不透明度
$("#panel").click(function(){
$(this).animate({left: "400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut(1000);
})
})
7. Animation callback function
In the above example, if you want to switch the css style instead of hiding the element in the last step. Now we can use the third parameter callback function of animate
$(function(){
$("#panel").css("opacity",0.5);//設(shè)置不透明度
$("#panel").click(function(){
$(this).animate({left: "400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});
})
})
This adds the css method to the animation queue.
8. Stop animation and determine whether it is in animation state
1. Stop the animation of the element
stop([clearQueue][,gotoEnd]) Both are optional parameters, both of type boolean
Parameter description:
clearQueue: represents whether to clear the unfinished animation queue
gotoEnd: represents whether to jump to the end state of the animation being executed
You can understand these two parameters of the stop() method through a comprehensive example:
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}
.head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}
</style>
<script src="../../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function () {
$("#panel")
.animate({height : "150" } , 2000 )
.animate({width : "300" } , 2000 )
.hide(3000)
.animate({height : "show" , width : "show" , opacity : "show" } , 2000 )
.animate({height : "500"} , 2000 );
});
$("button:eq(1)").click(function () {
$("#panel").stop();//停止當(dāng)前動(dòng)畫，繼續(xù)下一個(gè)動(dòng)畫
});
$("button:eq(2)").click(function () {
$("#panel").stop(true);//清除元素的所有動(dòng)畫
});
$("button:eq(3)").click(function () {
$("#panel").stop(false,true);//讓當(dāng)前動(dòng)畫直接到達(dá)末狀態(tài) ，繼續(xù)下一個(gè)動(dòng)畫
});
$("button:eq(4)").click(function () {
$("#panel").stop(true,true);//清除元素的所有動(dòng)畫，讓當(dāng)前動(dòng)畫直接到達(dá)末狀態(tài)
});
})
</script>
<body>
<button>開始一連串動(dòng)畫</button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<div id="panel">
<h5 class="head">三國(guó)殺殺天下</h5>
<div class="content">
夏侯惇的眼睛，陸遜的聯(lián)營(yíng)，郭嘉司馬深深的基情
</div>
</div>
</body>
</html>
2. Determine whether the element is in animated state
When using the animate() method, avoid inconsistency between animation and user behavior caused by the accumulation of animations. Animation accumulation occurs when the user quickly performs an animate() animation on an element.
The solution is to determine whether the element is in the animation state, and only add new animation to the element when it is not in the animation state.
Usage:
if(!$(element).is(":animated")){
//添加新的動(dòng)畫
}
Through this article’s detailed analysis of 8 jquery animation effects, you can play with jquery animation effects. I hope you will like this article that provides a comprehensive introduction to jquery animation effects.
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Java vs. JavaScript: Clearing Up the Confusion
Jun 20, 2025 am 12:27 AM
Java and JavaScript are different programming languages, each suitable for different application scenarios. Java is used for large enterprise and mobile application development, while JavaScript is mainly used for web page development.
Javascript Comments: short explanation
Jun 19, 2025 am 12:40 AM
JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic
How to work with dates and times in js?
Jul 01, 2025 am 01:27 AM
The following points should be noted when processing dates and time in JavaScript: 1. There are many ways to create Date objects. It is recommended to use ISO format strings to ensure compatibility; 2. Get and set time information can be obtained and set methods, and note that the month starts from 0; 3. Manually formatting dates requires strings, and third-party libraries can also be used; 4. It is recommended to use libraries that support time zones, such as Luxon. Mastering these key points can effectively avoid common mistakes.
Why should you place tags at the bottom of the ?
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
JavaScript vs. Java: A Comprehensive Comparison for Developers
Jun 20, 2025 am 12:21 AM
JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor
What is event bubbling and capturing in the DOM?
Jul 02, 2025 am 01:19 AM
Event capture and bubble are two stages of event propagation in DOM. Capture is from the top layer to the target element, and bubble is from the target element to the top layer. 1. Event capture is implemented by setting the useCapture parameter of addEventListener to true; 2. Event bubble is the default behavior, useCapture is set to false or omitted; 3. Event propagation can be used to prevent event propagation; 4. Event bubbling supports event delegation to improve dynamic content processing efficiency; 5. Capture can be used to intercept events in advance, such as logging or error processing. Understanding these two phases helps to accurately control the timing and how JavaScript responds to user operations.
JavaScript: Exploring Data Types for Efficient Coding
Jun 20, 2025 am 12:46 AM
JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf
How can you reduce the payload size of a JavaScript application?
Jun 26, 2025 am 12:54 AM
If JavaScript applications load slowly and have poor performance, the problem is that the payload is too large. Solutions include: 1. Use code splitting (CodeSplitting), split the large bundle into multiple small files through React.lazy() or build tools, and load it as needed to reduce the first download; 2. Remove unused code (TreeShaking), use the ES6 module mechanism to clear "dead code" to ensure that the introduced libraries support this feature; 3. Compress and merge resource files, enable Gzip/Brotli and Terser to compress JS, reasonably merge files and optimize static resources; 4. Replace heavy-duty dependencies and choose lightweight libraries such as day.js and fetch
