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

[Martin Berglund]

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