•  
     

Planeta Krypton salta três vezes em 500 milissegundos - jQuey

Outro efeito possível é o 'bounce' (saltar). Podemos passá-lo como entrada para .effect(), assim como fizemos com 'explode', mas adicionamos um parâmetro de entrada extra que determina o número de saltos. Esse código fará com que nosso alvo div salte duas vezes em 200 milissegundos:

Código: Selecionar todos

$('div').effect('bounce', {times:2}, 200);



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



Clique no planeta Krypton para que ele salte três vezes em 500 milissegundos: http://jsfiddle.net/ubh1t84e/2/