jQuery Animation Effect Exercise
I. Animation Hiding and Displaying
Methods: hide () and show ()
toggle () indicates the status of switching hide and show
$(document).ready(function(){
$("#button1").click(function(){
$ ( "p").hide(500,function(){
alert("Hidden completion")
})
})
$("#button2").click(function(){
$( "p").show(200,function(){
alert("Show success")
})
})
$("#button3").click(function(){
$("p").toggle(1000,function(){
$("p").css({color:"yellow"})
})
})
})
2. Animation Sliding
Method: slide and panel
#slide,#panel{
padding: 5px;
text-align: center;
background-color: #33b5e5;
border: solid 1px red;
}
#panel{
display: none;
padding: 40px;
}
</style>
<script>
$(document).ready(function(){
$("#slide").click(function(){
$("#panel").slideToggle()
})
})
</script>
3. Creating custom animation by animate method
Syntax: $(select).animate({params},speed,cellback)
Be careful:
1 The required params parameters must be written in brackets and the other parameters are consistent with the above.
2. Before a bit is given, all elements in html default to a static location and are immovable. If you want to move, set position to absolute, relative
3. The animate method can change almost all the css attributes, but only if the attributes are named by the hump nomenclature.
For example: in css: background-color: black; in animate: background color: "black"
4.animate uses relative values: add "+=" to the value that needs to be raised to achieve "continued increase"
5.animate uses queue functionality: if you write multiple animate() calls, jQuery creates a queue containing internal calls to these methods
Start animation
By default, therefore, the HTML element has a static location and is immovable. If it needs to be changed, then the position attribute of the element needs to be set as: absolute, relatIve, fixed;
animate (): Use relative values
$(document).ready(function(){
$("#button").click(function(){
$("div").animate({
left:"200px",opacity:'0.5',height:'160px',width:'160px'
})
})
})
With animate(), use queue functionality (if you call more than one animate() after each other. jQuery create "internals" containing these method calls, queues, and then runs these animate calls one by one.
$(document).ready(function(){
$("#button").click(function(){
var div= $("div")
div.animate({height:"160px" ,opacity:"0.5"},1000)
div.animate({fontSize:"2px" },1000)
div.animate({width:"160px" ,opacity:"0.9"},1000)
div.animate({height:"100px" ,opacity:"0.5"},1000)
div.animate({height:"100px" ,opacity:"0.9"},1000)
div.animate({fontSize:"10px" },1000)
})
})
Stop animation: stop()
stop() is used to stop an animation before it is finished. It can only pause an animation in the queue. If there are many animations in the queue, it will end the current animation and run the next animation.
$(document).ready(function(){
$("#button").click(function(){
var div= $("div")
div.animate({height:"160px" ,opacity:"0.5"},1000)
div.animate({fontSize:"2px" },1000)
div.animate({width:"160px" ,opacity:"0.9"},1000)
div.animate({height:"100px" ,opacity:"0.5"},1000)
17:01 2019/4/9 div.animate({height:"100px" ,opacity:"0.9"},1000)
div.animate({fontSize:"10px" },1000)
$("#button1").click.(function(){
$("div").stop()
})
})
})
4. jQuery - chaining
Through jQuery, methods can be linked together, and chaining allows us to run multiple methods (on the same element) in a single statement.
$("p").css({color:"red"}).slideUp(2000).slideDown(2000).animate(backgroundColor:"blue");
task
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Two level menu</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
})
</script>
<style>
*{
list-style: none;
text-decoration: none;
font-family: "Blackbody";
}
a{
color: black;
}
nav{
height: 40px;
width: 500px;
background-color: aqua;
margin: 0 auto;
}
nav ul {
margin: 0 auto;
}
nav ul li{
height: 40px;
width: 70px;
text-align: center;
line-height: 40px;
float: left;
margin-left: 8px;
position: relative;
}
nav ul li:hover{
background-color: green;
}
nav ul li:hover a{
color: yellow;
}
nav ul li ul{
float: none;
padding: 0;
position: absolute;
left: -8px;
display: none;
}
nav ul li ul li{
background-color: indigo;
height: 40px;
width: 90px;
}
nav ul li ul li:hover{
background-color: yellow;
}
nav ul li ul li:hover a{
color: indigo;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="#> > home page </a>
</li>
<li "divDisplay_one()" "div_one()">
<a href="#">Course Hall</a>
<ul id="one">
<li>
<a href="#">Web Page Actual Warfare</a>
</li>
<li>
<a href="#"> Server Technology</a>
</li>
<li>
<a href="#">Python Technology</a>
</li>
</ul>
</li>
<li>
<a href="#">Learning Center</a>
</li>
<li "divDisplay_two()" "div_two()">
<a href="#">Classical Cases</a>
<ul id="two">
<li>
<a href="#">Java</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">C#</a>
</li>
</ul>
</li>
<li>
<a href="#">About us</a>
</li>
</ul>
</nav>
</body>
<script>
var a = $("#one");
var b = $("#two");
function divDisplay_one(){
a.css({display:"block"});
}
function div_one(){
a.css({display:"none"});
}
function divDisplay_two(){
b.css({display:"block"});
}
function div_two(){
b.css({display:"none"});
}
</script>
</html>
The results of the above code implementation are as follows: Fig. __