1. Use basic animation functions
The basic animation functions are mainly divided into three categories: show, hide and toggle, all of which provide parameter-free versions. Indicates that animation switching is not applicable to the display state of the element:
$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();provides two parameter overloads, because the callback function can be omitted, so you can pass in a value as the only parameter as used in the opening example, then The element will be displayed/hidden with animation effects within the time specified by the parameter:
$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");If 200 is passed, it means that the layer will be displayed through a gradient within 200 milliseconds. The speed parameter can use three predetermined speeds One of the strings ("slow", "normal", or "fast") or the millisecond value representing the animation duration (such as: 1000).
All three functions can be passed in the callback function callback, signature As follows:
function callback() { this; // dom element}This in the callback function is the DOM object that executes this function. It will be executed when the animation ends.
2. Use the toggle function
#The toggle function is a more powerful function that can switch the visible state of an element. We often encounter the need The situation of using toggle. For example, you want a piece of text to display the pop-up layer when you click it for the first time, and hide the pop-up layer when you click it for the second time.
Note: The toggle() method is declared obsolete in jQuery1.8. Removed in .9; jQuery animation also has a method called toggle. Which one is called depends on the settings of the arguments passed.
We can achieve this effect by slightly modifying the opening example:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery - Start Animation</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() { //动画速度
var speed = 500; //绑定事件处理
$("#btnShow").click(function(event) { //取消事件冒泡
event.stopPropagation(); //设置弹出层位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //切换弹出层的显示状态
$("#divPop").toggle(speed);
}); //单击空白区域隐藏弹出层
$(document).click(function(event) {
$("#divPop").hide(speed)
}); //单击弹出层则自身隐藏
$("#divPop").click(function(event) {
$("#divPop").hide(speed)
});
}); </script></head><body>
<div>
<button id="btnShow">Display the text prompt</button>
</div>
<!-- 弹出层 -->
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;">
<div style="text-align: center;">pop div</div>
</div>
</body>
</html>Next Section