How to get jQuery to 'reset' itself upon an event? IE8 and 9 padding issue?

I don't know a lot about jQuery, maybe this is something simple... I'm working on this website:

http://www.adaptdesign.com/misc/jtppwg/venuedirectory.html

Clicking a link in the panel on the right, such as The Atlantic Hotel, St Brelade's Bay Hotel or The Club Hotel & Spa scrolls you down the page and lights up the respective DIV, no problem. This is done with the following jQuery:

<script>
$(document).ready(function() {
    $("a.anchorHL").anchorAnimate()
});

$(document).ready(function() {
$("a.anchorHL").anchorAnimate().click(function() {
$('.venuedivhighlight').removeClass('venuedivhighlight');

$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('venuedivhighlight');

});
});

</script>

the CSS for venuedivhighlight is as follows:

.venuedivhighlight {
background-image: url(images/anim-bg-fade.gif);
}   

The yellow fade is done with an animated GIF. I know jQuery can achieve this animated effect but I couldn't get it working, so to save time I used this as a workaround.

With Firefox this works perfectly, but with all the other browsers the selected venue will highlight once and then with subsequent clicks and scrolls the animated background will not reload. I've noticed that when setting the CSS above to have a red background, it can be seen on all of the browsers (in FF the red appears after the animation, and in other browsers the red appears right away).

Any ideas on how I can get the GIF to refresh with every click?

On a side note I'd love a bit more padding in the yellow box, ie more space around the text when the highlighting occurs. This is fine in most browsers but when adding even a few pixels of padding, the whole thing displays as a total mess in IE8 and 9 (in earlier versions, frustratingly it looks perfect). I开发者_如何学Pythons there a new IE padding issue workaround that anybody knows about?

Many thanks in advance.

Chris

Adapt Design

---

To answer your first question, I think your best bet might be to stick with your original plan and animate the color with jQuery. The problem you're most likely hitting is that jQuery can't do this out of the box. In order to animate color, you need the Effects library from jQueryUI. Check out their docs here: http://jqueryui.com/demos/animate/

So first, you'll download a custom package of jQueryUI that includes the effects lib and add it to the page, then try something like this:

$(function() {
    $("a.anchorHL").anchorAnimate().click(function() {
        $('.venuedivhighlight').removeClass('venuedivhighlight');
        var $el = $('a[name=' + $(this).attr('href').substring(1) + ']').next();

        // No need to set the class if the sole purpose is just to animate it later...
        $el.css({ backgroundColor: '#ff0000' });

        // Here's the magic
        setTimeout(function() {
            $el.animate({ backgroundColor: '#fff' }, 3000);
        }, 3000);
    });
});

To answer the second part of your question, if you want to add a padding of say, 5px, around the edge of your .ad-basic-cell divs, you'll need to subtract at least 10px from the width in order to do so:

.ad-basic-cell {
    width: 205px;
    float: left;
    padding: 5px;
}