快捷導(dǎo)航

jquery編寫(xiě)彈出信息提示條并延時(shí)滑出動(dòng)畫(huà)實(shí)現(xiàn)示例

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

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

摘要

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

簡(jiǎn)單的小組件

<!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>
    // 計(jì)數(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);
      // 延時(shí)隱藏+動(dòng)畫(huà)
      setTimeout(function() {
        $(`#${notificationId}`).slideUp(500, function() {
          $(this).remove();
        });
      }, 2000);
    }
  </script>
</body>
</html>

演示

以上就是jquery編寫(xiě)彈出信息提示條并延時(shí)滑出動(dòng)畫(huà)實(shí)現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于jquery彈出提示條延時(shí)滑出動(dòng)畫(huà)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

JQuery中兩個(gè)ul標(biāo)簽的li互相移動(dòng)實(shí)現(xiàn)方法
這篇文章主要介紹了JQuery中兩個(gè)ul標(biāo)簽的li互相移動(dòng)實(shí)現(xiàn)方法,可實(shí)現(xiàn)ul標(biāo)簽中l(wèi)i標(biāo)簽內(nèi)容相互替換的技巧,涉及jQuery操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
jquery使用iscorll實(shí)現(xiàn)上拉、下拉加載刷新
這篇文章主要為大家詳細(xì)介紹了jquery使用iscorll實(shí)現(xiàn)上拉、下拉加載刷新的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
jQuery對(duì)象數(shù)據(jù)緩存Cache原理及jQuery.data方法區(qū)別介紹
jQuery.data(..)來(lái)實(shí)現(xiàn)數(shù)據(jù)緩存，但有兩個(gè)用戶經(jīng)常使用的data([key],[value])和jQuery.data(element,[key],[value])，接下來(lái)為大家介紹下他們的區(qū)別，感興趣的朋友可以參考下哈
2013-04-04
jQuery實(shí)現(xiàn)給頁(yè)面換膚的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)給頁(yè)面換膚的方法,涉及jQuery頁(yè)面元素的選擇與樣式的操作,需要的朋友可以參考下
2015-05-05
jQuery學(xué)習(xí)筆記之入門(mén)
本文主要對(duì)jQuery的基礎(chǔ)知識(shí)進(jìn)行介紹，非常適合剛開(kāi)始接觸JQuery學(xué)習(xí)的朋友們，下面就跟小編一起來(lái)看下吧
2016-12-12
jQuery-1.9.1源碼分析系列（十一）DOM操作續(xù)之克隆節(jié)點(diǎn)
這篇文章主要介紹了jQuery-1.9.1源碼分析系列（十一）DOM操作續(xù)之克隆節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下
2015-12-12
jQuery實(shí)現(xiàn)批量判斷表單中文本框非空的方法(2種方法)
這篇文章主要介紹了jQuery實(shí)現(xiàn)批量判斷表單中文本框非空的方法,實(shí)例分析了2種實(shí)現(xiàn)判定非空的技巧,涉及jQuery頁(yè)面元素遍歷的相關(guān)技巧,需要的朋友可以參考下
2015-12-12
Jquery增加鼠標(biāo)中間功能mousewheel的實(shí)例代碼
這篇文章介紹了Jquery增加鼠標(biāo)中間功能mousewheel的實(shí)例代碼，有需要的朋友可以參考一下
2013-09-09
EasyUI學(xué)習(xí)之Combobox下拉列表(1)
這篇文章主要為大家詳細(xì)介紹了EasyUI學(xué)習(xí)之Combobox下拉列表的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
jQuery EasyUI之DataGrid使用實(shí)例詳解
這篇文章主要介紹了jQuery EasyUI之DataGrid使用實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-01-01