Then there are talking about jQuery effect, we talked about fadeTo () before, and now talk about the sliding effect , then what is the sliding effect?
We all had lessons on the school, in class, when the teacher needs to use the computer, the projector projected onto the screen, so that we see the video playback teacher, ppt, etc., the screen can rise and fall , and rise in energy let the screen rolled up, down can show the screen, which is sliding effect. We can make the interface a panel to decline, it can also rise, if it is falling, we need to use function: slideDown () ; while the sliding you need to use slideUp () function, since there in front of the foundation, then I can also speak a little faster, there is a function associated with the slide effect, we can think of, is slideToggle () , you can switch back and forth between slideDown () and slideUp ().
Function syntax:
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);Also the speed and callback function, speed is also the original call can fill in milliseconds, or "fast", such parameters "slow", I will not go into details.
Then knock a sample for your experiment:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").slideDown();
});
$("#btn2").click(function(){
$("#box").slideUp("fast");
});
$("#btn3").click(function(){
$("#box").slideToggle("slow");
});
});
</script>
<style type="text/css">
#box
{
text-align:center;
padding:20px;
background-color:#eeeeee;
border:solid 1px #c6c6c6;
display:none;
}
</style>
</head>
<body>
<button id="btn1">点击我拉下面板</button>
<button id="btn2">点击我上升面板</button>
<button id="btn3">点击控制面板</button>
<div id="box">Hello world!</div>
</body>
</html>Because these are relatively simple, we do not focus on how the next talk about the final content of the base effect, animation effects , we do not go! ! ! Really very simple.
By animate function we can achieve the effect of animation, its function syntax:
$(selector).animate({params},speed,callback);speed and callback no longer explain, as it has been said many times, we are speaking about what params to fill in, which can fill almost all of the css properties (some are not, oh, such a paddingLeft, rather than padding-left ), for example: Suppose there is now a <div id = "test"> </ div> panel, there is a button. We fill in the animate () function inside left: 200px; this property, then when we click the button, the panel will move to the position of 200px from the left. By default, all of the elements are static html displayed on the page, if you need to change, we position attribute element should read: fixed, relative, absolute one , in order to achieve animate () function, of course, we can also fill multiple parameters into account. Then put an example, let everyone play:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'300px',
opacity:'0.7',
height:'+=200px',
width:'200px'
});
});
});
</script>
</head>
<body>
<button>动画效果</button>
<div style="background:#000000;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>You may also find examples of which have a height: ' + = 200px', which is what does it mean, if only 200px, then when clicking the button, it will div panel width and height are set back to 200px, but + = 200px, that is based on the original, plus 200px, 200px would surely be so big. In fact, there is quite a bit of fun, you can try a certain width or height values was changed to toggle and see what happens.
So far, we have learned is click the button again, and then one operation, in fact, we click on a button, it can do a lot of work, for example, we click on a button, the button's function, we can make div panel animation many times, this is the animation queue , for example :( so everyone should try, more practice, you will find is actually fun)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'400px',opacity:'0.3'},"slow");
div.animate({width:'400px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.3'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#eeeeee;height:100px;width:100px;position:relative;">
</div>
</body>
</html>Hao Li, given that they were animated presentation, then it is surely able to suspend it halfway, that is, stop () function, the syntax is as follows:
$(selector).stop(stopAll,goToEnd);stopAll parameters are asking whether to clear the animation queue, it is not suspended, but stop, the default is false; gotoEnd parameter specifies whether to complete the current action immediately. The default is false. This is relatively simple, for example we put a play:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").animate({left:'300px'},"slow");
});
$("#btn2").click(function(){
$("div").stop();
});
});
</script>
</head>
<body>
<button id="btn1">开始动画</button>
<button id="btn2">stop</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>It slides into the animation effects slide, and then try to stop, but also can achieve the effect of stopping. This requires us to practice it yourself slightly, well, basic jQuery effects of it will stop here.
The last chapter: jQuery study notes [two] Next: No
