.html() is not working properly with fadeOut();

user_6944259 0
Viewed 48

I have this simple feature that when I click a button there will be a message that says Success

It is working but only on the first time when the button is clicked, when I click the button for the second time and again and again the message Success is not showing anymore.

Here's my jQuery/Javascript code

$(document).ready(function() {
    $('#submit').click(function(e){
    e.preventDefault();

    var message = 'Success';

    $('#message').html(message).delay(5000).fadeOut(400);
  })
})

It seems that .html(message).delay(5000).fadeOut(400); is the suspect or am i wrong?

This is my Html code

<div id="message"></div>
<input type="submit" value="submit" id="submit">

I have js fiddle for it. Here's the link https://jsfiddle.net/2dn9p1hv/

html jquery javascript
1 Answers

Issue

In your code you are using jQuery's .fadeOut() mathod which makes element invisible. Unless you will explicitly make it visible it will stay that way. You can make element visible e.g. by using related method .fadeIn().

Solution

You can use .fadeIn() to show invisible message as below:

$('#message').html(message).fadeIn(400);

In your code it should be placed like below:

$(document).ready(function() {
    $('#submit').click(function(e){
    e.preventDefault();
    var message = 'Success';
    $('#message').html(message).fadeIn(400);
    $('#message').html(message).delay(5000).fadeOut(400);
  })
})
user_67082740
Related