Question

I have a navigation animation that is being applied to elements with the “js” class – via a css background. I don’t want this animation to occur on the link for the current page (a class “current” is being echo’d out by PHP to the current page).

So basically the page your on (current page) link in the main nav will have a class of current, the others a class of js – and get the animation. How do apply that logic in a funciton? I can do it via css background but want to do it in js.
Here is working js used in combination with css for desired look:

 $(function() {
    $("ul#mainNav li a").addClass("js");
        $("ul#mainNav li a").hover(
          function () {
            $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
            $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
          },
          function () {
            $(this).animate({backgroundPosition:"(0 -130px)"}, 200);

          }
        );
    });

What I’m trying to no avail:

$(function() {
    if($("ul#mainNav li a").hasClass("current")) {
    //do nothing
    } else {
    $(this).addClass("js")
    }

//rest of animation function

});

});

Answer 1

There are several ways to approach this. If you need the selector you have for other things, you can do it like this:

$(function() {
    $("#mainNav li a").each(function() {
        if (!$(this).hasClass("current")) {
            $(this).addClass("js")
        }
    });

//rest of animation function
});

If you don’t need that whole selector for other things, then you can do it more simply like this:

$("#mainNav li a").not(".current").addClass("js");

Note, I’ve removed the ul from the start of your main selector as it is not required since ids are unique.