•  
     

Fazer o Planeta Krypton escorregar - jQuery

Chamando o efeito .effect() e passando 'slide' como um parâmetro, Krypton vai escorregar


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('slide',{times:3},500);
});
});



Clique no Planeta Krypton: http://jsfiddle.net/ubh1t84e/3/