Diferència entre revisions de la pàgina «Sol planetaII»

De wikiserver
Dreceres ràpides: navegació, cerca
(Es crea la pàgina amb «<source lang="java"> <!DOCTYPE html> <html> <head> <title>¡Bum!</title> <script src="//code.jquery.com/jquery-1.12.2.js"></script> <s…».)
 
 
(Hi ha 2 revisions intermèdies del mateix usuari que no es mostren)
Línia 15: Línia 15:
 
                 $("#effect").dblclick(function() {
 
                 $("#effect").dblclick(function() {
 
                     if (estado) {
 
                     if (estado) {
                         $("#effect").animate({
+
                         $("#effect").animate({ //estado original
 
                             backgroundColor: "#fff",
 
                             backgroundColor: "#fff",
                             width: 100
+
                            height:100,
 +
                             width:100
 
                         }, 1000);
 
                         }, 1000);
                     } else {
+
                     } else {  
                         $("#effect").animate({
+
                         $("#effect").animate({   //estado cambiado
 
                             backgroundColor: "#aa0000",
 
                             backgroundColor: "#aa0000",
                              
+
                             height:50,
                             width: 100
+
                             width: 50
 
                         }, 1000);
 
                         }, 1000);
 
                     }
 
                     }

Revisió de 15:39, 5 maig 2016

<!DOCTYPE html>
<html>
    <head>
        <title>¡Bum!</title>        
        <script src="//code.jquery.com/jquery-1.12.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

        <script>

            $(document).ready(function() {


                var estado = true;
                $("#effect").dblclick(function() {
                    if (estado) {
                        $("#effect").animate({  //estado original
                            backgroundColor: "#fff",
                            height:100,
                            width:100
                        }, 1000);
                    } else { 
                        $("#effect").animate({   //estado cambiado
                            backgroundColor: "#aa0000",
                            height:50,
                            width: 50
                        }, 1000);
                    }
                    estado = !estado;
                });

            });


        </script>
        <style>
            body {
                background-image: url('http://bit.ly/UpQgJ6');
                repeat: no-repeat;
            }

            div {
                height: 100px;
                width: 100px;
                border-radius: 100%;
                background-color: #fff;
            
            }

            
        </style>
    </head>
    <body>
        <div id="effect"> 
    </body>
</html>