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>

<button id="0">Highlight element 0</button>
<button id="1">Highlight element 1</button>
<button id="2">Highlight element 2</button>

CSS

body {
    margin-left: 50px;
}

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

.toALight {
    font-weight: bold;
}

JavaScript

$(".paragraph").alighter({
    animationDuration: 200,
    timer: 0
});

$("button").bind("click", function(){
    $(".paragraph").data("alightData").alight($(this).attr("id"));
});