Question

I have a page using the jQuery cycle plugin for a sliding banner, and inside each slide is a div (#info) whose background colour is animated on hover.

I’m also trying to use switchClass to switch between three color-schemes on the page and this also changes the background colour of #info, which works great until the hover on #info fires, after which the switchClass buttons no longer work.

Here’s the jQuery for the hover:

$('#info.default').hover(function(){
        $('#info.default').stop().animate({backgroundColor: '#CDBF21'}, 300);
        $('#info.default .description').stop().animate({color: '#444'}, 300);
    }, function() {
        $('#info.default').stop().animate({backgroundColor: '#203E52'}, 300);
        $('#info.default .description').stop().animate({color: '#fff'}, 300);
    });

And here are the switchClass parts:

$('.coral-green-button').click(function(){
        $('#info.default').stop().switchClass("default", "coral-green", 1000 );
        $('#info.green-blue').stop().switchClass("green-blue", "coral-green", 1000 ); 
    });

$('.green-blue-button').click(function(){
        $('#info.coral-green').stop().switchClass("coral-green", "green-blue", 1000 );
        $('#info.default').stop().switchClass("default", "green-blue", 1000);
    });

$('.mustard-blue-button').click(function(){
        $('#info.coral-green').stop().switchClass("coral-green", "default", 1000);
        $('#info.green-blue').stop().switchClass("green-blue", "default", 1000);
    });

Thanks!

Answer 1

I know this isn’t perfect but it is a step in the correct direction:

http://jsfiddle.net/Mutmatt/Q6zsm/19/

your element (on hover) is getting a new background that is a ELEMENT specific property therefor a class level background color CANNOT override that

Better:

http://jsfiddle.net/Mutmatt/Q6zsm/24/

Best:

http://jsfiddle.net/Mutmatt/Q6zsm/49/

Comments inline