jQuery effects
jQuery Effects - Hide and Show
Hide, show, toggle, slide, fade, and animate!
jQuery hide() and show()
Passed jQuery, you can use the hide() and show() methods to hide and show HTML elements
Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
The optional speed parameter specifies the speed of hiding/showing, and can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to be executed after hiding or displaying is completed.
jQuery toggle()
With jQuery, you can use the toggle() method to toggle the hide() and show() methods.
Show hidden elements and hide displayed elements.
Syntax:
$(selector).toggle(speed,callback);
The optional speed parameter specifies the speed of hiding/showing, and can take the following values: " slow", "fast" or milliseconds.
The optional callback parameter is the name of the function executed after the toggle() method is completed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".hot").toggle();
});
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<div class="hot">
<img src="http://www.pp3.cn/uploads/201510/2015102409.jpg" height="300px" width="200px">
<p>这是一张图片</p>
</div>
</body>
</html>Fade in and out
jQuery Fading method
With jQuery, you can achieve the fading effect of elements.
jQuery has the following four fade methods:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() method
jQuery fadeIn() is used to fade in hidden elements.
Syntax:
$(selector).fadeIn(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. .
The optional callback parameter is the name of the function to be executed after fading is completed.
jQuery fadeOut() method
jQuery fadeOut() method is used to fade out visible elements.
Syntax:
$(selector).fadeOut(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function executed after fading is completed.
jQuery fadeToggle() method
jQuery fadeToggle() method can switch between fadeIn() and fadeOut() methods.
If the element is already faded out, fadeToggle() will add a fade-in effect to the element.
If the element is already faded in, fadeToggle() will add a fade out effect to the element.
Syntax:
$(selector).fadeToggle(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function executed after fading is completed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>jQuery fadeTo() method
jQuery fadeTo() method allows a gradient to a given opacity (a value between 0 and 1).
Syntax:
$(selector).fadeTo(speed,opacity,callback);
The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The required opacity parameter in the fadeTo() method sets the fade effect to the given opacity (a value between 0 and 1).
The optional callback parameter is the name of the function to be executed after the function is completed.
Sliding
jQuery sliding method
With jQuery, you can create sliding effects on elements.
jQuery has the following sliding methods:
slideDown()
slideUp()
slideToggle()
jQuery slideDown () Method
jQuery slideDown() method is used to slide the element down.
Syntax:
$(selector).slideDown(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function executed after the sliding is completed.
jQuery slideUp() method
jQuery slideUp() method is used to slide elements up.
Syntax:
$(selector).slideUp(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function executed after the sliding is completed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>jQuery slideToggle() method
jQuery slideToggle() method can switch between slideDown() and slideUp() methods.
If elements slide down, slideToggle() slides them up.
If elements slide up, slideToggle() slides them down.
$(selector).slideToggle(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function executed after the sliding is completed.
Animation
jQuery animation - animate() method
jQuery animate() method for creating custom animations.
Syntax:
$(selector).animate({params},speed,callback);Required params parameters define the CSS properties that form the animation.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function to be executed after the animation is completed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:yellow;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>jQuery stop animation
jQuery stop() method
jQuery stop() method Used to stop animations or effects before they are completed.
The stop() method works with all jQuery effect functions, including slides, fades, and custom animations.
grammar:
$(selector).stop(stopAll,goToEnd);
The optional stopAll parameter specifies whether the animation queue should be cleared. The default is false, which only stops active animations, allowing any queued animations to execute backwards.
The optional goToEnd parameter specifies whether to complete the current animation immediately. The default is false.
So, by default, stop() will clear the current animation specified on the selected element.
The following example demonstrates the stop() method without parameters:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
