jquery編寫彈出信息提示條并延時滑出動畫實現(xiàn)示例

更新時間：2023年08月06日 11:18:46 作者：TANKING

這篇文章主要為大家介紹了jquery編寫彈出信息提示條并延時滑出動畫實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

摘要

平時編寫一些簡單的網(wǎng)站，又不想添加任何的組建和外部庫，但是需要一些彈窗或者彈出信息提示條，可以自己編寫一個簡單的小組件。

簡單的小組件

<!DOCTYPE html>
<html>
<head>
  <title>提示條示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    body{
      background: #eee;
    }
    button{
      padding: 6px 20px;
    }
    #app{
      width: 300px;
      margin:20px auto;
    }
    .notification-container {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .notification {
      background: #fff;
      color: #333;
      width: 250px;
      height: 70px;
      line-height: 70px;
      text-indent: 15px;
      border-radius: 10px;
      display: block;
      pointer-events: auto;
      margin-bottom: 10px;
    }
</style>
</head>
<body>
  <div id="app">
    <!-- 創(chuàng)建按鈕 -->
    <button onclick="createNotification()">創(chuàng)建</button>
    <!-- 提示條容器 -->
    <div id="notification-container"></div>
  </div>
  <script>
    // 計數(shù)
    let notificationCount = 0;
    // 創(chuàng)建提示條
    function createNotification() {
      // 增加提示條
      notificationCount++;
      const notificationId = `notification-${notificationCount}`;
      const notification = $(
        `<div class="notification" id="${notificationId}">提示條 ${notificationCount}</div>`
      );
      // 添加
      $("#notification-container").append(notification);
      // 延時隱藏+動畫
      setTimeout(function() {
        $(`#${notificationId}`).slideUp(500, function() {
          $(this).remove();
        });
      }, 2000);
    }
  </script>
</body>
</html>