Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to blink a div in jquery? [duplicate]

Possible Duplicate:
Blink an div with jquery

I need to know how to make blink of div in jquery?

like image 535
Mohan Ram Avatar asked Dec 15 '10 13:12

Mohan Ram


People also ask

How to make a div blink in JQuery?

JavaScript Code :fadeOut(500); $('. blink'). fadeIn(500); } setInterval(blink_text, 1000);

How do you make a HTML element blink?

You can add the . blink class to any HTML element to make it blink.


2 Answers

html

<div class="blink">blinking text</div>

jquery

function blink(selector){
$(selector).fadeOut('slow', function(){
    $(this).fadeIn('slow', function(){
        blink(this);
    });
});
}
    
blink('.blink');

demo :

function blink(selector) {
  $(selector).fadeOut('slow', function() {
    $(this).fadeIn('slow', function() {
      blink(this);
    });
  });
}

blink('.blink');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blink">blinking text</div>
non-blinking
<div class="blink">more blinking text</div>

Update (bringing the answer up-to-date)

You do not need to use jQuery for such effects anymore. You can do it with just CSS (using CSS animations).
(compatibility table at http://caniuse.com/#feat=css-animation)

CSS (using the standard properties)

.blink{
    animation:blink 700ms infinite alternate;
}

@keyframes blink {
    from { opacity:1; }
    to { opacity:0; }
};

Demo (with vendor prefixed properties) :

.blink {
  -webkit-animation: blink 700ms infinite alternate;
  -moz-animation: blink 700ms infinite alternate;
  -o-animation: blink 700ms infinite alternate;
  animation: blink 700ms infinite alternate;
}

@-webkit-keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-o-keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-moz-keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

;
<div class="blink">blinking text</div>
non-blinking
<div class="blink">more blinking text</div>
like image 187
Gabriele Petrioli Avatar answered Oct 02 '22 17:10

Gabriele Petrioli


Assuming your div has id="blinkMe"

setInterval(function () {
   var vis = $("#blinkMe").css("visibility");
   vis = (!vis || vis == "visible") ? "hidden" : "visible";
   $("#blinkMe").css("visibility", vis);
}, 500);

Note: used "visibility" and not "display" / .toggle() since the latter will cause layout to shift around while the div is blinking.

like image 44
David Tang Avatar answered Oct 02 '22 17:10

David Tang