blink.js

http://stackoverflow.com/questions/26454687/is-there-a-way-to-control-flow-of-promises-in-linear-call-order

by guest271314

HTML

<div>click to start blink</div>
<button>unbind</button>

CSS

div {
  border : 1px solid #000;
  width : 125px;
}

JavaScript

/*!
 * jQuery Modern Blink plugin
 * https://github.com/leonderijke/jQuery-Modern-Blink
 *
 * Version: 0.1.3
 * Author: @leonderijke
 * Licensed under the MIT license
 */

;
(function ($, window, document, undefined) {
    "use strict";

    var domPrefixes = 'Webkit Moz O ms'.split(' '),
        prefix = '',
        supportsAnimations = false,
        keyframeprefix = '',
        keyframes = '',
        defaults = {
            // Duration specified in milliseconds (integer)
            duration: 1000,

            // Number of times the element should blink ("infinite" or integer)
            iterationCount: "infinite",

            // Whether to start automatically or not (boolean)
            auto: true
        },
        animationCss,
        i;

    if (document.documentElement.style.animationName) {
        supportsAnimations = true;
    }

    if (!supportsAnimations) {
        for (i = 0; i < domPrefixes.length; i++) {
            if (document.documentElement.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
                prefix = domPrefixes[i];
                keyframeprefix = '-' + prefix.toLowerCase() + '-';
                supportsAnimations = true;
                break;
            }
        }
    }

    if (supportsAnimations) {
        keyframes = '@' + keyframeprefix + 'keyframes modernBlink { ' +
            '50% { opacity: 0; }' +
            '}';

        var styleSheet = null;
        if (document.styleSheets && document.styleSheets.length) {
            for (i = 0; i < document.styleSheets.length; i++) {
                if (document.styleSheets[i].href.indexOf(window.location.hostname) == -1) {
                    continue;
                }

                styleSheet = document.styleSheets[i];
                break;
            }
        }

        if (styleSheet !== null) {
            styleSheet.insertRule(keyframes, 0);
        } else {
            var s = document.createElement('style');
            s.innerHTML = keyframes;
...