jQuery Forum

Hi,

I'm trying to create a fade in out effect of three divs in the same place, but for some reason the effect is duplicating itself for two of the divs.
Any help appreciated

1. <div id="click1">click1</div>
2. <div id="click2">click2</div>
3. <div id="click3">click3</div>
4. <div id="content1" class="vis">This is the content initially</div>
5. <div id="content2" class="vis">This is the new content faded back in</div>
6. <div id="content3" class="vis">and this is the next stage with classes being added to suit</div>
7. <script>
8.   $("#click1").click(function () {
9.   $(".vis").fadeOut(200, function () {
10.   $("#content1").fadeIn(500);
11.   });
12.   });
13.   $("#click2").click(function () {
14.   $(".vis").fadeOut(200, function () {
15.   $("#content2").fadeIn(500);
16.   });
17.   });
18.   $("#click3").click(function () {
19.   $(".vis").fadeOut(200, function () {
20.   $("#content3").fadeIn(500);
21.   });
22.   });
23.  
24.   </script>

I'm using the following css

1. #click1 {position: fixed;
2.     top: 100px;
3.     left: 100px;
4.     font-size: 26px;
5.     background-color: pink;}
6. #click1:hover {background-color: blue;}
7. #click2 {position: fixed;
8.     top: 100px;
9.     right: 100px;
10.     font-size: 26px;
11.     background-color: blue;}
12. #click2:hover {background-color: pink;}
13. #click3 {position: fixed;
14.     top: 100px;
15.     right: 300px;
16.     font-size: 26px;
17.     background-color: green;}
18. #click3:hover {background-color: yellow;}
19. #content1 {
20.     background-color: purple;
21.     border-radius: 10px;
22.     z-index: 3;}
23. #content2 {
24.     background-color: yellow;
25.     z-index: 2;}
26. #content3 {
27.     background-color: red;
28.     z-index: 1;}
29. .vis {
30.     position: fixed;
31.     left: 300px;
32.     top: 300px;
33.     width: 200px;
34.     height: 200px;}

Many thanks

Mike