Question

I have the following functions which work fine to show and hide rails flash alerts. It displays and then hides the flash message with a delay, but I wanted to add a button to allow the user to hide the flash if the delay is to slow, but it only works when I don’t use the hideFlashMessage function???

The functions look like this:

function showFlashMessages() {
  $('#flash').delay(800).animate({"top": "+=75px"}, 200);
}

function hideFlashMessages() {
  $('#flash').delay(10000).animate({"top": "-=75px"}, 300);
  $('#flash').fadeOut();
}

function clickHideFlashMessages() {
  $('#flash').animate({"top": "-=75px"}, 300);
  $('#flash').fadeOut();
}

…and they get called like so:

$(document).ready(function(){

  showFlashMessages();

  hideFlashMessages();

  $("#closeFlash").click(function(){
    clickHideFlashMessages();
  });

});

Any help is appreciated.

Answer 1

You are very close… you just need to add $('#flash').stop(); to your #closeFlash click handler to stop the hideFlashMessages animation before you can start the new animation:

  $("#closeFlash").click(function(){
    $('#flash').stop();
    clickHideFlashMessages();
  });

Here’s a working example: http://jsfiddle.net/p6knk/