[jQuery] Click on anchor, wait 1/2 second, then scroll to matched ID

[jQuery] Click on anchor, wait 1/2 second, then scroll to matched ID


Hi
I am trying to create a nice little effect with an unordered list with
anchors to a definition list with matching ID's on each <dt>. When a
link in the <ul> is clicked, I want to delay the scroll for half a
second, and then scroll down to the right spot.
Here is what i have written so far:
JavaScript:
$('ul li a').click(function() {
    $('li').removeClass('selected');
    $(this).parent('li').addClass('selected');
    $(this).animate({
        opacity: '1'
    }, 500, function() {
    var jump = $(this).attr('href');
        $('dl').localScroll({
            target: jump,
            queue: true,
            duration: 1000,
            hash: true
        });
    });
});
HTML:
<ul>
    <li>
        <a href="#a1" title="">Jump</a>
    </li>
    <li>
        <a href="#a2" title="">Jump</a>
    </li>
</ul>
<dl>
    <dt id="a1">Title</dt>
    <dd>Some text</dd>
</dl>
I know this can be made more compact and elegant, but I don't know how
to do it.
I appreciate any pointers and tips on how to improve my code.
-Martin Berglund