•  
     

Explodir o Planeta Krypton - jQuery

Introdução: jQuery UI
Hora de desvendar novos caminhos da jQuery com uma nova biblioteca em jQuery: jQuery UI

jQuery UI inclui um número de animações super legais que você pode usar para fazer com que seu website faça coisas incríveis.

Por exemplo, se lembra de quando lamentamos o fato de que a jQuery não inclui um efeito .blowUp() (explodir) para nosso planeta Krypton? Bem, isso ainda é verdade. Mas a jQuery UI tem um efeito chamado .effect(), e vamos passar para ele o parâmetro de entrada 'explode', que significa explodir.

Perceba que incluímos uma tag <script> extra nos nossos documentos HTML; fizemos isso para incluir a jQuery UI nas nossas páginas. Não precisamos fazer isso com a jQuery, uma vez que a Codecademy a inclui automaticamente para nós.



HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div></div>
</body>
</html>


CSS

Código: Selecionar todos

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

div {
    height: 100px;
    width: 100px;
    border-radius: 100%;
    background-color: #008800;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#003500), to(#008800));
    background-image: -webkit-linear-gradient(left, #003500, #008800); 
    background-image:    -moz-linear-gradient(left, #003500, #008800);
    background-image:     -ms-linear-gradient(left, #003500, #008800);
    background-image:      -o-linear-gradient(left, #003500, #008800);
}



JavaScript

Código: Selecionar todos

$(document).ready(function(){
$('div').click(function(){
$(this).effect('explode');
});
});




Clique no Planeta Krypton para vê-lo explodir: http://jsfiddle.net/ubh1t84e/