Fri, 2012-04-20 12:38
Hello,
I have a page with two divs: a red one and a green one. When the mouse hovers over either one, then I want the opacity to drop from 1.0 to 0.5 using the jQuery animate() function. I can get this part working fine.
However, when I click on one of the divs, I now want it to stay permanently at opacity:0.5 and not respond to the mouse hovering over it. I do this by adding the class "clear" to the div which sets the opacity to 0.5, and then in the hover function, only performing the animation if the div does not have this class. But also, I only want one div to have the class "clear" assigned to it at any one time. Therefore, if the other div already has class "clear", I need to remove the class from it. E.g. when the red div is clicked, I add "clear" to the red div, and remove "clear" from the green div. This part I cannot get to work - when I remove the "clear" class from the other div, the opacity stays at 0.5, rather than returning to 1.0.
What I have noticed is that if I remove the animation functions for when the mouse hovers over a div, then removing the "clear" class does return the opacity back to 1.0 as expected. But with the hover functions, it does not do this.
Thanks for any help!
Ed.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test document</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> div#red_div { height:200px; background-color:red; opacity:1.0; } div#green_div { height:200px; background-color:green; opacity:1.0; } div#red_div.clear { opacity:0.5; } div#green_div.clear { opacity:0.5; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#red_div").click(function() { if ($("#red_div").hasClass("clear") == false) { $("#red_div").addClass("clear"); $("#green_div").removeClass("clear"); } }); $("#green_div").click(function() { if ($("#green_div").hasClass("clear") == false) { $("#green_div").addClass("clear"); $("#red_div").removeClass("clear"); } }); $("#red_div").mouseover(function() { if ($("#red_div").hasClass("clear") == false) { $(this).stop().animate({opacity:0.5}, 500); } }); $("#green_div").mouseover(function() { if ($("#green_div").hasClass("clear") == false) { $(this).stop().animate({opacity:0.5}, 500); } }); $("#red_div").mouseout(function() { if ($("#red_div").hasClass("clear") == false) { $(this).stop().animate({opacity:1.0}, 500); } }); $("#green_div").mouseout(function() { if ($("#green_div").hasClass("clear") == false) { $(this).stop().animate({opacity:1.0}, 500); } }); }); </script> </head> <body> <div id="red_div"></div> <div id="green_div"></div> </body> </html>
Sun, 2012-04-22 00:13
#1
Oops! Responded to the wrong
Oops! Responded to the wrong post. 
That's because I held this open to cogitate upon an answer. 
cheers,
gary
Wed, 2012-04-25 11:10
#2
Simple, brutish, and inelegant
Sorry, thought I had come back to this. Here is an inelegant solution. It becomes unwieldy with more switched elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test document</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> body { font: 100%/1.5 sans-serif; } #red { height:200px; background-color:red; -moz-transition: opacity linear 1s; -ms-transition: opacity linear 1s; -o-transition: opacity linear 1s; -webkit-transition: opacity linear 1s; transition: opacity linear 1s; } div#green { height:200px; background-color:green; -moz-transition: opacity linear 1s; -ms-transition: opacity linear 1s; -o-transition: opacity linear 1s; -webkit-transition: opacity linear 1s; transition: opacity linear 1s; } .on, #red:hover, #green:hover { opacity: .5; } </style> <script type="text/javascript" src="switch.js"></script> </head> <body> <div id="red"> <p>red stuff</p> </div> <div id="green"> <p>green stuff</p> </div> </body> </html>
And, the javascript.
window.onload = function () { doOnloadEventHandler (); } function doOnloadEventHandler () { if (!document.getElementById("green")) { return; } if(!document.getElementById("red")) { return; } // The above take care of errors should either id be missing var green = document.getElementById("green"); var red = document.getElementById("red"); green.onclick = function() { red.setAttribute("class", ""); green.setAttribute("class", "on"); } red.onclick = function() { red.setAttribute("class", "on"); green.setAttribute("class", ""); } }
cheers,
gary