为什么这种淡出不起作用

Why is this fade out not working?

本文关键字：不起作用 淡出 为什么      更新时间：2023-09-26

我只是把它添加到一个内部html文档中。所以它只希望这个特定的项目存活 10 秒。其他人就像它一样，因为它们代表不同的聊天气泡。

function placeChatBubbleOnScreen(message){
    var chatBubble = "<div class= 'glass' onshow = '$(this).fadeOut(1000);'><p class= 'chat'>" + message + "<p></div>";
    //<img class = 'speechBubble' src = '../images/GibberChatBubble.png'/>
    document.getElementById("MenuBackground").innerHTML += chatBubble;
}

既然你在问题中标记了jQuery，我将在这里放一些jQuery。

如您的问题的评论所示，没有定义 onshow 属性，这意味着它不会自行执行任何操作。您仍然可以添加一个，但它不会与任何类型的事件侦听器相关联。你最好使用 jQuery 中的 .fadeOut（），而不是尝试将侦听器与它何时可见相关联。

这里有一个很好的jQuery方法来编写你正在尝试做的事情：

function placeChatBubbleOnScreen(message){
  var thisDiv = $('<div>').addClass('glass').append(
    $('<p>').addClass('chat').append(message)
  ).appendTo('#MenuBackground');
  setTimeout(function(){thisDiv.fadeOut('slow');}, 2000);
}

如果你不太了解jQuery，这可能会令人困惑，所以我希望你知道基础知识。在这里，我动态创建一个新的 DIV（jQuery 方法 [$]，当传递元素的开放标记时，将创建一个表示该元素的新 jQuery 对象），将类玻璃添加到 DIV，并附加一个段落，其中包含类聊天和传递给 placeChatBubbleOnScreen 方法的文本。创建 DIV 并附加消息的段落后，我将 DIV 附加到具有 ID 菜单背景的元素。然后我设置了一个超时，使消息将在屏幕上保留 2 秒（2000 毫秒），然后它会缓慢执行淡出。

当然，有很多不同的方法可以做到这一点，就像编码中的大多数事情一样，但这种方式是有效的，并且相当简洁。你可以在这里看到一个小提琴：https://jsfiddle.net/jy0znq0c/

相关文章：