CODEWITHSUNDEEP
jquery
kraYz
kraYz

Reputation: 607

add/remove Class transition does not work

I have a menu made by a "ul" list. I have 2 classes for hover style and normal. I want to animate the transition between those 2 classes at mouseover.

I have this html:

<ul class="mainNav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Store</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Your Account</a></li>
                <li><a href="#">Contact</a></li>
</ul>

Classes:

forHover, notHover

jQuery 1.9.1 ; UI 1.10.1

jQuery code:

$('.mainNav li:not(:last-child)').hover(function(){

    $(this).addClass("forHover",3000);
    return false;
},function(){

    $(this).removeClass("forHover",3000);
    return false;

});

The hover effect works ok but there is no transition. Why not?

Upvotes: 1

Views: 1524

Answers (2)

Nope
Nope

Reputation: 22339

I think you are using the addClass and removeClass from the standard jQuery API.

You need to reference the jQuery UI API for the UI version.

DEMO -- Using the UI API reference jQuery UI 1.10.1 works fine

I downloaded the effects of the 1.10.1 version and added it to the DEMO above.
The DEMO is using your exact same versions and all is working. There is some other localized issue you are experiencing as jQuery UI works out-of-the-box.

Maybe some other API or plug-in you are referencing is overwriting $.ui or similar

Demo is using your code as is and jQuery 1.9.1 + jQuery UI 1.10.1 as you are:

$('.mainNav li:not(:last-child)').hover(function () {
    $(this).addClass("forHover", 3000);
    return false;
}, function () {
    $(this).removeClass("forHover", 3000);
    return false;
});

Edit

I checked out your site you are linking and even after using your exact forHover CSS it still works in latest Chrome, Firefox and IE10.

I wasn't able to fully see and understand what all the other JavaScript in your file was trying to do but I would have to guess that somewhere in there you are doing something to those menu items which somehow counteracts the animation effect.

DEMO - using the CSS from your actual forHover

Edit

I see now what is happening. Using the developer tools you can see when selecting the li that when hovering over the menu items the forHover is applied but is immidiatly overwritten by your .mainNav li, .notHover { style! Hence all the styles in the forHover are struck-through.

Your CSS is clashing!

A dirty quick-fix is adding !important to the forHover styles, that should make them work but it is a dirty fix.

It would be better to assign the CSS from .mainNav li, .notHover { to just .notHover , assigning notHover to the li elements by default and then use jQuery UI's switchClass, similar to this (code below is untested but syntax should be right): 

$('.mainNav li:not(:last-child)').hover(function () {
    $(this).switchClass("notHover", "forHover", 3000);
    return false;
}, function () {
    $(this).switchClass("forHover", "notHover", 3000);
    return false;
});

Upvotes: 2

Kevin B
Kevin B

Reputation: 95040

You can't animate background images with jQuery UI's effects methods.

http://api.jqueryui.com/addClass/

Not all styles can be animated. For example, there is no way to animate a background image. Any styles that cannot be animated will be changed at the end of the animation.

Upvotes: 0

Related Questions