Jquery animation stop

by ellhn

HTML

<div id="title">Click to stop me</div>

CSS

#title {
    font-family: Arial;
    border: 1px solid #ccc;
    font-size: 20px;
    text-align: center;
    padding: 20px;
}

JavaScript

function animation(){
    $("#title")
        .animate({opacity: 0.1}, {duration: "slow"})
        .animate({opacity: 1.0}, {duration: "slow", done: animation});
}


$(function() {
    $("#title").click( function(){ $(this).stop(true); } );
    animation();
});