CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
user3087015
user3087015

Reputation: 15

Continuously fade in and out

I have this JavaScript to make the div flash every two seconds. I was wondering if I could add anything into this current function so that the div fades in and out instead of appearing and disappearing with no transition.

JavaScript

  <script language = "javascript">
        function flash()
        {
            var blinker = 2000
            var timeIn = setInterval(function() {
                var element = document.getElementById('sign');
                element.style.visibility = (element.style.visibility == 'hidden' ? '' : 'hidden');
            }, blinker);        
        }
    </script>

HTML div

 <div class = "sign" id = "sign">

    <p> hello </p>

</div>

Upvotes: 1

Views: 1826

Answers (5)

chrisg86
chrisg86

Reputation: 11857

It is also possible to fadeToggle with jQuery. See details here:

http://api.jquery.com/fadeToggle/

<script>
    function flash(id) {
        $('#'+id).fadeToggle();
    }

    var blinker = 2000;
    var timeIn = setInterval(function() {
        flash('sign');
    }, blinker);
</script>

Upvotes: 0

Smern
Smern

Reputation: 19066

If you want it to continue fading in and out.. you could try something like this:

function keepFading($obj) {
    $obj.fadeToggle(2000, function () {
        keepFading($obj)
    });
}
keepFading($("#sign"));

See working example in Fiddle

This function would then work on any jquery object you pass it. So if you have something else you want to do the same thing you can just call it like keepFading($("#someOtherEle"));

For this to work, you'll need to make sure that jquery is included. You can then put the above code at the bottom of your html... or in your head if you wrap in a $(document).ready( ... )

Upvotes: 1

Milan and Friends
Milan and Friends

Reputation: 5610

Here's a FIDDLE

setInterval(function() {
  $('.sign').animate({ opacity: '0' }, 800).animate({ opacity: '1' }, 800);
}, 2000);

Upvotes: 0

fortegente
fortegente

Reputation: 1391

You can implement fadeIn and fadeOut on pure javascript:

 function fadeOut(id,val){ 
     if(isNaN(val)){ 
         val = 9;
     }
     document.getElementById(id).style.opacity='0.'+val;

     //For IE
     document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
     if(val>0){
         val–;
         setTimeout('fadeOut("'+id+'",'+val+')',90);
     }else{
         return;
     }
 }

 function fadeIn(id,val){
     // ID of the element to fade, Fade value[min value is 0]
     if(isNaN(val)){ 
         val = 0;
     }

     document.getElementById(id).style.opacity='0.'+val;
     //For IE
     document.getElementById(id).style.filter='alpha(opacity='+val+'0)';

     if(val<9){
         val++;
         setTimeout('fadeIn("'+id+'",'+val+')',90);
     }else{
         return;
     }
 }

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

Since you've tagged jQuery, you can simplify it to:

$('#sign').fadeIn(2000); // fade-in in 2 seconds

and

$('#sign').fadeOut(2000); // fade-out in 2 seconds

or as pointed out by user: Bondye

function flash() {
    $('#sign').fadeToggle(2000);
}

Upvotes: 2

Related Questions