2 replies [Last post]
ejohns85
ejohns85's picture
Offline
newbie
Last seen: 10 years 13 weeks ago
Timezone: GMT+1
Joined: 2012-04-17
Posts: 4
Points: 6

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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Oops! Responded to the wrong

Oops! Responded to the wrong post. Sad

That's because I held this open to cogitate upon an answer. Tongue

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.