jQuery Text Effects

by dixalex

HTML

<div>
    Expand and contract: Prologis
</div>

<span class='wiggle'>
    Wiggle: Prologis
</span>

<span class='pulsate'>
    Pulsate: Prologis
</span>

CSS

span {
	display: block;
	clear: both;
	max-width: 250px;
	margin: 0 auto;
	text-align: center;
}

JavaScript

$(document).ready(function() {
    var div = $("div");
	var pulsate_element = $('.pulsate');
    var imgScanner = setInterval(function() {
        div.animate({
            color: 'black'
        }, 250);
		div.animate({
            fontSize: '1.75em'
        }, 250);
        div.animate({
            fontSize: '1.5em'
        }, 250);
        div.animate({
            color: 'blue'
        }, 250);
		
		$( ".wiggle" ).effect( "shake", {times:1}, 250 );
    }, 2000);
    var pulsate = setInterval(function() {
        pulsate_element.animate({
            color: 'black'
        }, 220);
		pulsate_element.animate({
            fontSize: '1.6em'
        }, 220);
        pulsate_element.animate({
            fontSize: '1.5em'
        }, 220);
        pulsate_element.animate({
            color: 'red'
        }, 220);
        pulsate_element.animate({
            backgroundColor: 'yellow'
        }, 220);
    }, 250);
});