I have the following HTML and jQuery code to warn users about using the 'remember me' check box as follows:

in HTML:

<input type="checkbox" id="remember" name="remember"> Remember me
<span id="remember_feedback"></span>

In Script:

$('#remember').change(function(){
     if(this.checked){
          $('#remember_feedback').text('(Don\'t use on a public puter)');
     }else{
          $('#remember_feedback').text('');
     }
});

It works fine but I would like the text to smoothly / slowly changes as i've seen on some sites not pops in and out as it does now, is it possible without using plugins?

I have the following HTML and jQuery code to warn users about using the 'remember me' check box as follows:

in HTML:

<input type="checkbox" id="remember" name="remember"> Remember me
<span id="remember_feedback"></span>

In Script:

$('#remember').change(function(){
     if(this.checked){
          $('#remember_feedback').text('(Don\'t use on a public puter)');
     }else{
          $('#remember_feedback').text('');
     }
});

It works fine but I would like the text to smoothly / slowly changes as i've seen on some sites not pops in and out as it does now, is it possible without using plugins?

• javascript
• jquery

• Are you meaning fading in/out? – Chris Brown Commented Apr 20, 2014 at 15:45

4 Answers 4

you can do like this:

$('#remember').change(function(){
     if(this.checked){
          $('#remember_feedback').hide().text('(Don\'t use on a public puter)').fadeIn('slow');
     }else{
          $('#remember_feedback').fadeOut('slow');
     }
});

JSFiddle example

Add the desired text to the html:

<span id="remember_feedback">(Don't use on a public puter)</span>

... then in css, hide it by default:

#remember_feedback {
    display:none;
}

... then just use fadeIn and fadeOut in js:

$('#remember').change(function(){
      if(this.checked){
          $('#remember_feedback').fadeIn();
      }else{
          $('#remember_feedback').fadeOut();
      }
 });

Here is a DEMO you can play with.

As an alternative to the answers below, you can also use jQuery's .fadeToggle() (including the addition of the message into the span in the HTML);

var fadeTime = 500; // Time (ms) for fade animation

$('#remember').change(function(){    
    $('#remember_feedback').fadeToggle(fadeTime);
});

JSFiddle

Add the text initially to the remember_feedback span and set it to be hidden by default using the html5 hidden attribute:

<span id="remember_feedback" hidden >Don't use on a public puter</span>

Then just show and hide it in the js:

$('#remember').change(function()
{
      if(this.checked)
      {
          // Parameter is number of milliseconds to fade the element
          $('#remember_feedback').fadeIn(1000); 
      }
      else
      {
          $('#remember_feedback').fadeOut(1000);
      }
});