脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery弹出提示延时滑出动画

jquery编写弹出信息提示条并延时滑出动画实现示例

 更新时间：2023年08月06日 11:18:46   作者：TANKING  
这篇文章主要为大家介绍了jquery编写弹出信息提示条并延时滑出动画实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

摘要

平时编写一些简单的网站，又不想添加任何的组建和外部库，但是需要一些弹窗或者弹出信息提示条，可以自己编写一个简单的小组件。

简单的小组件

<!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">
    <!-- 创建按钮 -->
    <button onclick="createNotification()">创建</button>
    <!-- 提示条容器 -->
    <div id="notification-container"></div>
  </div>
  <script>
    // 计数
    let notificationCount = 0;
    // 创建提示条
    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>

演示

以上就是jquery编写弹出信息提示条并延时滑出动画实现示例的详细内容，更多关于jquery弹出提示条延时滑出动画的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论