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><br>
<br>
    <small>* Your variable rate will adjust quarterly on each January 1, April 1, July 1 and October 1 (the “interest rate change date"), based on the 3-Month LIBOR Index, published in the Money Rates section of the Wall Street Journal 15 days prior to the interest rate change date, rounded up to the nearest one-eighth of one percent (0.125% or 0.00125). APRs reflect interest rates as of April 1, 2015. Visit DiscoverStudentLoans.com/AAA for more information, including up-to-date interest rates and APRs.</small>
<small>AAA Student Loans by Discover are made by Discover Bank. Loan approval is subject to credit approval and other eligibility requirements. AAA Southern New England may be compensated for the referral of student loan customers. DISCOVER is a trademark of Discover Financial Services and Discover Student Loans.</small>
<small>1 Your variable interest rate for any given month is calculated by adding the current One-month LIBOR index (captured on the 25th day, or the next business day thereafter, of the month immediately preceding such calendar month and rounded up to the nearest 1/8th of one percent as published in the "Money Rates" section of the Wall Street Journal (Eastern Edition)) to your margin. The current One-month LIBOR index is 0.250% on 02/01/15. LIBOR stands for London Interbank Offered Rate. Your variable interest rate and Annual Percentage Rate (APR) may be higher depending upon (a) the credit histories of the student and, if applicable, the cosigner, (b) the repayment option and loan term selected, and (c) the requested loan amount and other information provided on the online loan application. If approved, applicants will be notified of the rate qualified for within the stated range. Your variable interest rate will...

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);