CODEWITHSUNDEEP
jquerycss
sol
sol

Reputation: 22949

How to reset fadeOut function?

I want to show text for a few seconds when a user clicks a button. At the moment, when I click the button the text shows and fades out, but I'm not able to repeat the action.

Demo here: http://codepen.io/sol_b/pen/gLeMZR

This is my code:

$('#add').click(function() {
  $('#add').hide();
  $('#remove').show();  
  $('#message').html('Added!').delay(3000).fadeOut();
})

$('#remove').click(function() {
  $('#remove').hide();
  $('#add').show();
  $('#message').html('Removed!').delay(3000).fadeOut();
})

Is there a way to reset the function so that it will work more than once?

Upvotes: 0

Views: 2164

Answers (3)

Pravin Durugkar
Pravin Durugkar

Reputation: 355

hey just saw your code in code pen You just need to fadeIn() again to use it for next time.. here is your answer...


    $('#add').click(function() {
      $('#add').hide();
      $('#remove').show();
      $('#message').html('Added!').fadeIn();
      $('#message').html('Added!').delay(3000).fadeOut();
    })

    $('#remove').click(function() {
      $('#remove').hide();
      $('#add').show();
      $('#message').html('Added!').fadeIn();
      $('#message').html('Removed!').delay(3000).fadeOut();
    })

Upvotes: 1

fernando
fernando

Reputation: 822

you can try with setTimeout, like this...

setTimeout(function() {
$('#message').html('Removed!').fadeOut();
}, 3000); //3s

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You need to call fadeIn() before performing fadeOut()

$('#message').html('Removed!').fadeIn().delay(3000).fadeOut();

Upvotes: 4

Related Questions