Question

Any ideas given the code below why the highlight is being triggered to run twice? I confirmed it’s running twice using alerts which fire more than once. See anything wrong here?

//Scroll to the Anchor in the URL, if there is one
var destination = $(document.location.hash).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500, function() {
// Animation complete.
$(document.location.hash).effect("highlight", {}, 3000);
});

Answer 1

Run your selector in the Firebug console. I’m fairly certain it will be returning two items. Run “$(“html:not(:animated),body:not(:animated)”).size()” in the console and you’ll see what I mean. On pretty much any webpage you’re going to get a match for html:not(:animated) as well as for body:not(:animated). The comma in your selector means “Selects the combined results of all the specified selectors.” API Document is here. And the call to animate will act on each element in the wrapped set that is returned. Maybe something else is going on, but I would check the size of the wrapped set first.