these outcommented selection methods dont work,
i cant see why
it was about just experimenting
- <!DOCTYPE html>
- <html>
- <head>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
- </script>
- <script>
- $(document).ready(function(){
- $("button").click(function(){
- $("#div1").fadeIn();
- $("#div2").fadeIn("slow");
- $("#div3").fadeIn(3000);
- $("#div3").css('background-color','blue');
- });
- });
- $(document).ready(function(){
- $("#div1").click(function(){
- $('.effekt :nth-child(2)').prev().css('background-color','purple');
-
- ////////////following selection methods dont work, why?
- // $('.effekt :nth-child(3)').prev().css('background-color','orange'); //but previous one is the same!
- // $('.effekt :nth-child(2)').css('background-color','orange');
- // $('#div3').prev().css('background-color','orange');
- // $(this).next().css('background-color','orange');
- // $('#div1').next().css('background-color','orange');
- //---------------------------------------------------------
- $("#div2").css('background-color','grey');
- $("#div3").css('background-color','gold');
- });
- });
- $(document).ready(function(){
- $("#rejto").click(function(){
- $("body .effekt div").hide();
- }); });
- </script>
- </head>
- <body>
- <p>fadeIn()-hide()-css</p>
- <button>click to show</button>
- <br><br>
- <div class="effekt">
- <div id="div1" style="width:80px;height:20px;display:none;background-color:red;"></div><br>
- <div id="div2" style="width:80px;height:20px;display:none;background-color:green;"></div><br>
- <div id="div3" style="width:80px;height:20px;display:none;background-color:blue;"></div><br>
- </div>
- <br>
- <button id="rejto">hide all</button>
- </body>
- </html>