How to blink a div in jquery? [duplicate]

This question already has an answer here: 开发者_Go百科 Closed 12 years ago.

Possible Duplicate:

Blink an div with jquery

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

---

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>

---

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.