Make alert reappear with slideUp AngularJs and Bootstrap

Question

my scenario is: I have a file uploader that users can only select some pre defined formats. The problem is, if the user selects a forbidden extension, I'd like to show an alert indicating that (s)he has selected an invalid file. The problem is, after I call slideUp and try to show the alert again, it never shows.

My js:

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

Of course I'm not firing the event by a button, but by a 'wrongExtension' event on the uploader itself.

I'm using bootstrap, AngularJS and Jquery. Here is a fiddle simulating the problem : fiddle

Thanks in advance !

Answer 1

You need to reset the opacity of the .alert element to 1 from 0 as it's set by fadeTo :

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

Fork of your Fiddle

Answer 2

it's all about what the methods you use do:

show -> set display: block

hide -> set display: none

fadeTo -> set opacity: 0

Now, after clicking once, you have display: none and opacity: 0 on .alert , both hiding the alert element. When clicking again, display: block is set via show(), but opacity: 0 is still hiding the element. A possible quick solution would be to set the opacity after clicking:

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

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

Best Marc