My goal is to have an element fade out when clicked and then fade back in when its space is clicked again. I also want the opacity of the element to be 0.9 instead of 1 when visible.
I've encountered two issues with my code. First, the hover selector breaks as soon as I click the element and the JavaScript executes, causing the element to lose its hover effect once it unfades. Second, there's a strange problem where initially the element has an opacity value of "" for some reason. I suspect this might be due to the hover effect confusing the JavaScript about the true opacity value.
function handleElement(element){
var op = element.style.opacity;
if(op != 0){
fadeOut(element);
return;
} else if(op == "" || op == null){
element.style.opacity = 1;
handleElement(element);
return;
} else {
fadeIn(element);
return;
}
}
function fadeOut(element) {
//works fine :)
}
function fadeIn(element) {
//works fine :)
}
Here is the relevant CSS:
.sm-box{
float:left;
width: 100px;
height: 100px;
margin: 0px;
background-repeat:no-repeat !important;
background-position:center !important;
}
.sm-box:hover{
opacity: 0.9;
filter: alpha(opacity=90);
}
And here is the element within its environment:
<body>
<div class="container">
<div class="sm-box"></div>
<div class="sm-box"></div>
<div class="sm-box"></div>
<div id="elem" class="sm-box" onclick="handleElement(this)"></div>
</div>
</body>
It seems that my JavaScript and CSS are not interacting well together. The JavaScript is initializing the element with a blank opacity, breaking the hover opacity effect after execution.