jQuery condition for animation

Question

am brand new to javascript and jQuery so this question might seem dumb but i couldnt find any exemple or doc on it.

I got this function for a little color animation roll-over and roll-out which works fine:

$(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#fff"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); }
);

The fact if that i renctly added a stylesheet change button that also works fine:

$(".black-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        return false;
    });

    $(".grey-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        return false;
    });

The point is that i'd like to create a condition on my roll-over menu so that i can switch the color of this over too.

So i tried several things like this:

/////////////////////////////////////////////////////////////////////////////
    //Stylesheet change
    $(".black-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        var tt = "black";
        return false;
    });

    $(".grey-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        var tt = "grey";
        return false;
    });

    /////////////////////////////////////////////////////////////////////////////
    //Over menu
    if (tt == "black"){
        $(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#fff"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); }
        );
    }else {
        $(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#e2e2e2"}, 300 ); }
        );
    }

But of course doesnt go. The only thing that work a bit is if i change the "black" in the if () sor anything else it does well the second roll-over style.

Any idea ?

Answer 1

A couple of things to comment on, but not necessarily an answer to your question.

The stylesheet is loaded and applied when the page load, changing it will not change style retrospectively. So the following will not work

$("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");

(And even if it did, it would have changed all your <link> tags!)

There is liberal showing and hiding using display:

$(".wp-polls-loading").css({ display:"none"});

When you could just use the hide() method instead.

$(".wp-polls-loading").hide();

Your scoping of the tt variable may not be helping you. Delcare it less locally, i.e. outside your anonymous functions

Bear in mind also, that your class selectors are comparatively slow. If you can comine them we an element selector, e.g.

$("div.box_nav")

Or even add an id attribute to them an use that:

$("#MyNav")