iT邦幫忙

2

javascript 如何做到跳訊息接著淡出?

  • 分享至 

  • xImage

我想做一個收到圖片後會從網頁右下角像訊息一樣跳出小圖,
然後在不影響UI操作下自己跳出後慢慢淡出。

我目前想法是跟menu那種做法相似,用hover過去他會移出來一點給你看到又點選到。 例子: https://codepen.io/Shven/pen/JjJMwo

但是比較不清楚如何透過javascript上傳圖片成功後,來觸發像我hover的動作去令訊息彈出。

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

6
deh
iT邦研究生 1 級 ‧ 2023-03-20 17:24:14
最佳解答
function showMessage() {
  // 更改CSS樣式,顯示#message
  document.getElementById("message").style.display = "block";
  // 添加淡出效果
  $("#message").fadeOut(3000);
}

// 監聽圖片上傳成功事件,觸發showMessage函數
document.getElementById("your-upload-input").addEventListener("change", showMessage);
<div id="message">
  <img src="path/to/your/image" alt="message image">
</div>

#message {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
}

alanotmt iT邦新手 4 級 ‧ 2023-03-20 17:34:55 檢舉

感謝!!乾淨俐落!

很棒的問題跟回答 讚讚(‘ v`)

我要發表回答

立即登入回答