jquery mask disappears after three seconds-Front-end Q&A-php.cn

jquery mask disappears after three seconds

王林

Release： 2023-05-25 10:51:07

Original

548 people have browsed it

In website development, the JavaScript library jQuery is often used to achieve various interactive effects. Among them, the interactive effect of mask layer is also very common. The mask layer is a semi-transparent mask layer covering the page to force the user to process the interaction tasks of the current layer before interacting with the page. In the specific implementation process, we can use jQuery's fadeOut() method to achieve the effect of the mask layer automatically disappearing after three seconds.

Let’s first learn about the fadeOut() method. This method is used to gradually fade out the matching element and all its siblings, and eventually disappear. This method works by changing the opacity of the element. jQuery's fadeOut() method has some optional parameters, the most commonly used of which is the speed configuration parameter, which is used to define the number of milliseconds of the effect time. When the speed parameter value is "slow", "fast" or a specific millisecond value, the fade out effect has different running speeds. In addition to this, jQuery also provides some other additional parameters, such as easing to achieve different easing effects, and the complete parameter to execute a callback function after the fadeout is completed.

Now let us write a jQuery code that implements the mask layer to automatically disappear after three seconds, including the HTML of the mask layer. First, you need to define an HTML file, including a mask layer and content area for testing. The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 三秒后遮罩消失</title>

<style type="text/css">
    #mask{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.5);
        text-align: center;
        z-index: 9999;
        display: none;
    }

    #content{
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
        background:#ddd;
        color:#333;
        width:200px;
        height:100px;
        text-align:center;
        line-height:100px;
    }
</style>
</head>

<body>
    <div id="mask">
        <div id="content">这是一个测试内容区域</div>
    </div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">

</script>

</html>

Copy after login

In the head tag, we define two CSS styles #mask and #content, respectively turning on the mask layer and defining the style of the content area for testing. Among them, #mask sets the position to absolute, making it display full screen and layout at the top level. The background is rgba(0,0,0,.5) translucent black. The text-align attribute centers the content area. The z-index attribute sets the level of the mask layer, higher than other elements of the web page. The display attribute sets the default state of the mask layer. The initial state is not displayed, waiting for the jQuery script to control its display. The #content style is designed to occupy the test content area in the center of the mask layer. It is a pure style definition and does not affect JavaScript implementation.

Now, we need to write a jQuery script to control the appearance and disappearance of the mask layer. We use jQuery's setTimeout() method to trigger the mask layer's fadeOut() method after three seconds to achieve the mask disappearing effect. The code is as follows:

<script type="text/javascript">
$(document).ready(function(){
    $("#mask").fadeIn();    //控制遮罩层的显示
    setTimeout(function(){
        $("#mask").fadeOut();   //控制遮罩层的隐藏
    },3000);        
});
</script>

Copy after login

The above jQuery code is clear and concise. First, use the fadeIn() method to control the display of the mask layer after the document is ready. The setTimeout() method takes a function and a time parameter, and the function is executed after the specified time. Here, we set a time of three seconds, and when the time is over, execute the fadeOut() method to gradually fade out the mask layer and finally hide it. Note that the fadeOut() method can use a speed parameter to define the duration of the fadeout effect, but in this case it's not necessary to go into detail.

After completing the above code, you can run this code in the browser and see the mask layer appear on the page and disappear automatically after three seconds. You can embed the code into any HTML page to make the mask layer disappear automatically after the page is unloaded.

To summarize, jQuery can help us quickly and easily achieve various web page effects. As a common interactive effect, the mask layer is particularly commonly used in website development. In this article, we use jQuery's fadeOut() method and setTimeout() method to achieve the effect of the mask layer automatically disappearing after three seconds. This not only provides us with a convenient and easy implementation method, but also demonstrates the flexible use of jQuery in website development.

The above is the detailed content of jquery mask disappears after three seconds. For more information, please follow other related articles on the PHP Chinese website!