The problem is the top-level function. Why do you think it should be called, in response to what? It doesn't seem to make any sense. Instead, you should do something like:
$( document ).ready(function() {
menuItemWrapper = $("#menu a");
menuItemWrapper.hover(
function () {
menuItemWrapper.switchClass("style1", "style2", 700);
},
function () {
menuItemWrapper.switchClass("style2", "style1", 700);
}
);
});
I also simplified handling a bit, replacing two methods
.mouseEnter()
and
.mouseLeave()
with on
.hover()
accepting two handler, on mouse moving in and out.
Please see:
http://learn.jquery.com/about-jquery/how-jquery-works/[
^],
http://api.jquery.com/hover/[
^],
http://api.jqueryui.com/switchClass/[
^].
—SA