jQuery Blinking Elements

Set the interval and blink elements forever or for a set amount of time.

by Justin Breen

HTML

<div id="b">&nbsp;</div>
<div id="myDiv" class='pulse' data-times="10"><h1>TRAVEL CLICK ON ME YO!</h1></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>

CSS

body{
    background-image: url("http://fc08.deviantart.net/fs30/f/2008/089/4/7/Cloud_Background_by_RedemptionDesign.jpg");
}
div#b {
    position: fixed;
    top:40px;
    right:-300px;
    width: 256px;
    height: 256px;
    background: url(http://www.locanto.info/classifieds/images/airplane.png) 0 0 no-repeat;
    z-index:100000;
}
.blink {
    color: #FFF !important;
    background: GREEN; !important;
    border: 5px solid RED;
    border-radius: 25px;
}
div{
    color: green;
    text-align: center;
    padding: 10px;
    margin-top: 30px;
    
}

@-webkit-keyframes pulse {
  from {
    font-size: 100%;
  }
  to {
    font-size: 200%;
  }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}​

JavaScript

$(document).ready(function () {
    var blink = setInterval(function()
        {
            $('#myDiv').toggleClass('blink');
            times = $('#myDiv').data("times");
            times -= .5;
            if(times == 0) clearInterval(blink);
        }, 100);
    $("BODY").snowfall({image :"http://loktar00.github.io/JQuery-Snowfall/images/flake.png", minSize: 10, maxSize:32});   

var b = function($b,speed){
    beeWidth = $b.width();
    
    $b.animate({
        "right": "110%"
    }, speed);
};

$(function(){
    b($("#b"), 3000);
});
});

var div = document.querySelector('#myDiv');
var rot = 0;

var int = setInterval(function(){
     div.style.webkitTransform = 'rotate('+rot+'deg)'
     rot+=5;
}, 100);