CODEWITHSUNDEEP
jqueryjquery-animate
Jammer
Jammer

Reputation: 2420

jQuery animate if class is not .active

I am trying to animate the background colour of my nav which I can get to work with 

$(".mainNav li a").hover(function () {
    $(this).stop().animate({ backgroundColor: "#EF4D23" }, 500);
}, function () {
    $(this).stop().animate({ backgroundColor: "#303030" }, 500);
});

What i want to do next is only do this animation if the class of the tag is not .active, so I am trying:

$(".mainNav li a").hover(function () {
    if ($(this).not(".active")) {
        (function () {
            $(this).stop().animate({ backgroundColor: "#EF4D23" }, 500);
        }, function () {
            $(this).stop().animate({ backgroundColor: "#303030" }, 500);
        });
    }
});

But it is not doing anything or giving me an error.

Thanks for any help.

Upvotes: 0

Views: 4704

Answers (3)

derek
derek

Reputation: 4886

try the following:

    $(".mainNav li a").not(".active").hover(function () {
...code    
    });

Upvotes: 4

Paul Tomblin
Paul Tomblin

Reputation: 182812

if ($(this).not('active').length > 0) {

Upvotes: 0

Richard Dalton
Richard Dalton

Reputation: 35793

You want to use .is() rather than .not() (.not() will filter the elements, .is() returns a boolean based on whether it matches the selector)

$(".mainNav li a").hover(function () {
    if (!$(this).is(".active")) {
       (function () {
            $(this).stop().animate({ backgroundColor: "#EF4D23" }, 500);
        }, function () {
            $(this).stop().animate({ backgroundColor: "#303030" }, 500);
        });
     }
});

Upvotes: 6

Related Questions