jQuery condition for animation

Question

Hey all, 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

You are declaring variable "tt" locally and then trying to access it globally by the looks of things. Can't be certain because we can't see the entire structure of your code, but if you change:

var tt = ....

to

window.tt = ....

It will probably work. I don't recommend making this a global variable if you can scope it within the method or a closure, but doing the above will at least prove whether or not this is the issue.

Answer 2

The problem here is that the variable tt only exists within the scope of the click functions. What you could do is declare tt before, and then set it inside the click actions.

var tt = 'black'; // Default to black

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

At this point, tt will either be "black" or "grey" and will exist within the scope that you are checking it with your if statement.

Also, the $ is an alias of jQuery, so there is no need to switch between the two. You could just use $ when you're trying to stop the animation so everything is consistent.

---

UPDATE: I think the issue (I can't see all your code so I can't be sure) is that you are declaring the hover event when the document gets loaded. In this case, it will always use the black hover. What you need to do is place the hover code inside the stylesheet change functions so that the hover gets updated when the stylesheet is changed. Here is an example:

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

    // First unbind old hover
    $('.box_nav').unbind('mouseover').unbind('mouseout');

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

    return false;
});

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

    // First unbind old hover
    $('.box_nav').unbind('mouseover').unbind('mouseout');

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

    return false;
});

Answer 3

Well, for one, you are using the tt var outside the scope of its function. If you declare it inside that click function, you can't see it outside of that block. You should declare it globally first.

Answer 4

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")

Answer 5

Changing the CSS file won't cause the page to be re-rendered. You will need to cause a refresh to display the new styles.

You can't use Animate to manipulate css color values unless you use the color plug-In for colors. The reason for this is that JQuery's default implementation of the Animate function only increments decimal-valued css properties. Color being represented as a hex or string value won't animate correctly.

Answer 6

What others have said about changing a CSS file after the page has loaded is correct. A better solution would be to put all the CSS into the same file, with different class names, and add/remove classnames to your elements dynamically, rather than trying to change the classes themselves (which won't work)

Edit - added example. Something like:

<html>
  <head>
    <link href='<?php bloginfo("template_url"); ?>/css/styles-black-white.css' type="text/css" rel="stylesheet">
    <link href='<?php bloginfo("template_url"); ?>/css/styles-grey-white.css' type="text/css" rel="stylesheet">        
  </head>
  <body class=gw>
  </body>
</html>

and in javascript:

$("body").removeClass("gw").addClass("bw");

and in your css

/* for example you had a class for anchors */
body.gw a { ... } /* was: a { ... } in styles-grey-white.css   */
body.bw a { ... } /* was: a { ... } in styles-black-white.css  */
/* for example you had a class called "hilite" */
body.gw .hilite { ... } /* was: .hilite { ... } in styles-grey-white.css   */
body.bw .hilite { ... } /* was: .hilite { ... } in styles-black-white.css  */