CODEWITHSUNDEEP
javascriptjquery
Carlo
Carlo

Reputation: 33

jQuery text change smoothly

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 computer)');
     }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?

Upvotes: 0

Views: 2835

Answers (4)

krozero
krozero

Reputation: 6433

you can do like this: 

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

JSFiddle example

Upvotes: 6

Chris Brown
Chris Brown

Reputation: 4635

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

Upvotes: 1

Joshua Kissoon
Joshua Kissoon

Reputation: 3309

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 computer</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);
      }
});

Upvotes: -1

benomatis
benomatis

Reputation: 5633

Add the desired text to the html:

<span id="remember_feedback">(Don't use on a public computer)</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.

Upvotes: 1

Related Questions