Codecademy Jquery Effects

by pixeloco

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<h1>Hide</h1>
<div id="hide"></div>

JQUERY UI
<h1>Effect: Explode</h1>
<div id="explode"></div>

<h1>Effect: Bounce</h1>
<div id="bounce"></div>

<h1>Effect: Slide</h1>
<div id="slide"></div>

CSS

h1 {font-size:14px; margin:20px 0 5px 0;}
#hide {width:50px; height:50px; background-color:black;}
#explode {width:100px; height:100px; background-color:orange;}
#bounce {width:100px; height:100px; background-color:green;}
#slide {width:100px; height:50px; border-radius: 0 10px 10px 0; background-color:silver;}

JavaScript

$('#hide').hide();

$('#explode').click(function(){
    $(this).effect('explode');
});

$('#bounce').click(function(){
    $(this).effect('bounce', {times: 3}, 200);
});

$('#slide').click(function(){
    $(this).effect('slide');
});