jQuery.alighter demo

More information, documentation and download on the project's page : http://pioul.fr/jquery-alighter/

HTML

<script src="http://pioul.fr/ext/jquery_alighter/jquery.alighter.min.js"></script>
<div class="paragraph">Lorem <span class="toALight">ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <span class="toALight">ullamco laboris</span> nisi ut aliquip ex ea commodo    
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla <span class="toALight">pariatur</span>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..
</div>

<div id="console"></div>

CSS

body {
    margin-left: 50px;
}

.paragraph {
    padding: 100px;
    border: 1px solid #000;
}

.toALight {
    font-weight: bold;
}

#console {
    height: 40px;
    line-height: 40px;
}

JavaScript

$(".paragraph").alighter({
    color: 'blue',
    opacity: 0.3,
    shadowBlurSize: 50,
    circlePadding: 0,
    animationDuration: 2000,
    animationEasing: 'linear',
}).bind("animationStart.alighter", function(){
    $("#console").text("Currently animating");
}).bind("animationStop.alighter", function(){
    $("#console").text("Currently NOT animating");
});