如何使div元素逐渐消失

Question

我正在学习Rails，而且我正在使用Rails网络应用程序。它有一个＆＃34; Order＆＃34;按钮，当我点击它时，它说：＆＃34;感谢您订购＆＃34;。它是使用flash动作完成的。我希望这个消息在5秒后消失。我添加了这段代码：

$(document).ready(function() {
    $("#notice").fadeOut("slow");
});

此脚本位于views / layout文件夹中，并链接到同一文件夹中的application.html.erb文件。但是，它不起作用。我做错了什么，我该如何解决？

Answer 1

嗯，你必须做几件事来实现它。这就是我要做的。

1. 使用div添加id并隐藏它。

   <div id="notice" style="display: none"> Thank you for your ordering </div>

2. 添加脚本。

   $(document).ready(function note() {
       $("#notice").fadeIn().delay(5000).fadeOut();
   });
   

3. 将onclick函数添加到.erb文件。

   <%= link_to "Order", order_path, :onclick=>'function note()' %>

希望它会有所帮助。

P.S。您还可以跳过步骤2并将脚本直接添加到.erb文件中。

<%=
  link_to "Order", order_path, :onclick=>'$("#notice").fadeIn().delay(5000).fadeOut();'
%>