Question

我在一个应用程序中工作，我必须在成功提交某些内容时显示消息。在这个工作示例中，这个div始终显示，但我不希望这样，我希望它被隐藏，并且单击按钮时应该显示该消息。我怎样才能做到这一点？这是我的例子：

http://jsfiddle.net/BandonRandon/VRYBk/1/

以下是代码：

$(document).ready(function() {    
    $(".close-green").click(function () {
        $("#message-green").fadeOut("slow");
    });

    //fade out in 15 seconds if not closed 
    $("#message-green").delay(5000).fadeOut("slow");
});

Answer 1

在您的小提琴中，.click()功能不会冒泡并改为点击<a href>标签。尝试将其绑定到<a>而不是<span>。

尝试提供.stop()，然后fadeOut()工作。

＆＃13;

$(document).ready(function() {    
  $(".close-green").click(function () {
    $("#message-green").stop().fadeOut("slow");
    return false;
  });
  //fade out in 15 seconds if not closed 
  $("#message-green").delay(50000).fadeOut("slow");
});

＆＃13;

#message-green{
  height:30px;
  background:#00FF00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="message-green">Some Content <a href="#" class="close-green">Close</a></div>

＆＃13;

小提琴：http://jsfiddle.net/5cj3L6Lr/

Answer 2

您正在页面加载时向动画队列添加延迟，因此添加到该队列的所有项目将仅在延迟后执行。

您可以使用stop()

清除队列

$(document).ready(function() {
  $(".close-green").click(function() {
    $("#message-green").stop(true).fadeOut("slow");
  });

  //fade out in 15 seconds if not closed 
  $("#message-green").delay(5000).fadeOut("slow");

});

#message-green {
  height: 30px;
  background: #00FF00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="message-green">
  Some Content
  <a href="#"><span class="close-green">Close</span></a>
</div>

Answer 3

如果我理解正确，您需要隐藏该框，直到您单击该按钮，然后显示该框直到超时然后消失

试试这个jsfiddle：http://jsfiddle.net/VRYBk/133/

要在开头隐藏消息：

#message-green{
    display:none;
}

这是你想要的吗？

Answer 4

$("#btn").click(function () {
    $("#message-green").fadeIn("fast");
    //fade out in 15 seconds if not closed 
    $("#message-green").delay(5000).fadeOut("slow");
});

closeFN = function(){
     $("#message-green").css('display','none');
};

http://jsfiddle.net/0n4chqhr/

Answer 5

有几种方法可以做到这一点。

请参阅我的小提琴here。

$(".action-click").click(function () {
    $("#message-green").toggle("slow"); // toggles visibility
    $(this).toggle(); // toggles the trigger visibility
    $('#message-green').fadeOut(5000); // fades out message after 5s
});

// If the user clicks close before the auto Fadeout 
$('.close-green').click(function() {
    $('#message-green').fadeOut(5000);
});

基本上，您可以将div的样式设置为display:none;，然后触发toggle()，然后随后fadeOut()将动画时间传递为5000，持续5秒等值

请参阅Jquery文档here，特别是底部有关显示消息的示例代码。

最后，您可能希望将所有“表单”功能放入其自己的JS命名空间中，并在那里创建用于处理它的函数。将内联JS保持在最低限度：）

如何在点击时淡出jQuery中的消息

5 个答案: