Home/ Questions/Q 7604977
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T00:03:04+00:00

I have a set up where I have three squares, the first two are

  • 0

I have a set up where I have three squares, the first two are set up to fade away when the third one is clicked. When you click it what happens though is the first two just disappear, no fading, I can’t really figure out why, any thoughts?

http://jsfiddle.net/6fSEz/

that’s the fiddle and this is the code by itself:

<html>
<head>
<style>
.box 
{     
    opacity:1;
    color: white;
    width: 100px;
    height: 100px;
} 

#box1
{
    background-color: green;
}

#box2
{
    background-color: red;
}

#box3
{
    background-color: blue;
}

.fadeAway1
{ 
    opacity:0;
    -webkit-transition-property: opacity; 
    -webkit-transition-duration: 2s; 
}  

.fadeAway2 
{ 
    opacity:0;
    -webkit-transition-property: opacity; 
    -webkit-transition-duration: 5s; 
}  
</style>
</head>

<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" onclick="box2.className='fadeway1';box1.className='fadeaway2';"   
class="box">Tap to fade</div>



</body>
</html>

Thanks in advance for any help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In the click function you are removing the styles applied by the “.box” class styles. This removes the width and height, etc. Also, CSS and JavaScript are case-sensitive. Capitalization between selectors must match the element attributes, exactly.

    Updated jsfiddle: jsfiddle.net/6fSEz/2/

    • 0