Geek Answers Handbook

JQuery condition for animation

I am completely new to javascript and jQuery, so this question may seem dumb, but I could not find any example or document on it.

I got this function for a little flipping and deploying color animation that works great:

$(".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 that I added an added button to change the stylesheet, which 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 fact is that I would like to create a condition in my inverted menu so that I can switch the color of this too.

So, I tried a few 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 it doesn’t. The only thing that works a bit is if I changed the “black” in if () sor, whatever it does, the second roll-over style.

Any idea?

+4
source share
6 answers

A few things to comment on, but not necessarily the answer to your question.

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

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

(And even if that happened, it would change all your <link> tags!)

There is a liberal show and hide using the display:

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

Instead, you can simply use the hide () method.

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

Your scope of the tt variable may not help you. Delcare is less local, i.e. Beyond Your Anonymous Functions

Remember also that your class selectors are relatively slow. If you can use them, we select an element, for example

 $("div.box_nav")

Or add an id attribute to them, which:

 $("#MyNav")
+3
source

You declare the variable "tt" locally, and then try to access it all over the world. I can’t be sure, because we cannot see the whole structure of your code, but if you change:

 var tt = ....

to

 window.tt = ....

That will probably work. I do not recommend making this global variable if you can cover it as part of a method or closure, but doing the above will at least prove whether this is a problem.

+2
source

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

 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 be either “black” or “gray” and will exist within the scope that you check with the if .

In addition, $ is an alias of jQuery , so there is no need to switch between them. You can just use $ when you try to stop the animation so that everything is consistent.

UPDATE: I think the problem (I don’t see all your code, so I can’t be sure) is that you are declaring a hover event when the document loads. In this case, he will always use black hovering. What you need to do is place the guidance code inside the functions of changing the stylesheet so that the guidance is 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; });
+1
source

What others said about changing the CSS file after loading the page is correct. The best solution would be to put all the CSS in the same file with different class names and dynamically add / remove class names, and not try to change the classes yourself (which will not work)

Edit - added an example. Sort of:

 <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 */
+1
source

Well, for example, you use tt var outside the scope of your function. If you declare it inside this click function, you cannot see it outside of this block. You must declare it globally first.

0
source

Changing the CSS file will not re-render the page. You will need to call an update to display the new styles.

You cannot use Animate to manage css color values ​​unless you use the color plugin for colors. The reason for this is because the default jQuery implementation for the Animate function only increases the decimal values ​​of the css properties. A color represented as a hexadecimal or string value will not animate correctly.

0
source

More articles:


All Articles