Question

我的情景是：我有一个文件上传器，用户只能选择一些预定义的格式。问题是，如果用户选择禁用的扩展名，我想显示一个警告，表明他选择了一个无效的文件。问题是，在我调用slideUp并尝试再次显示警报后，它永远不会显示。

我的js：

$('#testBtn').click(function(){
$(".alert").show();
  window.setTimeout(function() {
    $(".alert").fadeTo(1500, 0).slideUp(500, function(){
   });
}, 5000);
});

当然，我没有通过按钮触发事件，而是通过错误的扩展＆＃39;上传者自己的事件。

我使用bootstrap，AngularJS和Jquery。这是模拟问题的小提琴：fiddle

提前致谢！

Answer 1

您需要将.alert元素的不透明度从1重置为0，因为它由fadeTo设置：

$(".alert").fadeTo(1500, 0).slideUp(500, function(){
    $(this).css({'opacity': 1});
});

Fork of your Fiddle

Answer 2

关于你使用的方法的全部内容：

show - ＆gt;设置display: block

隐藏 - ＆gt;设置display: none

淡出 - ＆gt;设置opacity: 0

现在，点击一次后，您display: none上的opacity: 0和.alert都隐藏了警报元素。再次点击时，display: block是通过show（）设置的，但opacity: 0仍然隐藏了该元素。一种可能的快速解决方案是在点击后设置不透明度：

$('#testBtn').click(function(){
    $(".alert").css('opacity', '1');
    $(".alert").show();

    window.setTimeout(function() {
        $(".alert").fadeTo(1500, 0).slideUp(500, function(){
        });
    }, 5000);
});

最佳

马克

使用slideUp AngularJs和Bootstrap重新出现警报

2 个答案: