Question

我只是将其添加到内部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;
}

Answer 1

由于您在问题中标记了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为MenuBackground的元素。然后我设置一个超时，这样消息将在屏幕上保持2秒（2000毫秒），然后它会慢慢淡出。

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

为什么这个淡出不起作用？

1 个答案: