slideSample

Ejemplo del uso de slideDown y slideUp

by Rubén Lacasa Mas

HTML

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body>
<button id='reset'>
Resetear
</button>
<button id='ocultar'>
Ocultar Parrafo Visible con SlideUp
</button>
<button id='ver'>
  Mostrar Parrafo Oculto con SlideDown
</button>
<button id='fadeOut'>
Ocultar Parrafo Visible con FadeOut
</button>
<button id='fadeIn'>
  Mostrar Parrafo Oculto con FadeIn
</button>
<div id='visible'>
<h1>
Este es el parrafo visible
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et libero vel lacus consequat facilisis. Sed pretium, orci dignissim sollicitudin fringilla, diam nunc commodo purus, sed accumsan augue ex ut sapien. Sed consequat interdum velit at sodales. Proin placerat est ut metus pellentesque lacinia. Duis ut mi consequat, molestie lacus sit amet, egestas nisi. Sed in erat arcu. Morbi venenatis consectetur pulvinar. Sed in justo id lorem fermentum fermentum id sed nisi.
</p>

</div>

<div id='oculto'>
<h1>
Este es el parrafo oculto
</h1>
<p>
Curabitur vel libero magna. Sed id tincidunt dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur luctus at felis id commodo. Vestibulum iaculis lectus sed dolor ornare, in consequat lectus laoreet. Etiam interdum neque et dolor placerat vehicula eu sit amet lectus. Fusce blandit ligula id sapien fringilla, eu molestie neque aliquam. Maecenas vitae augue a elit varius volutpat. Nullam ex ex, finibus eu lectus vel, tincidunt auctor nunc. Proin aliquam risus sit amet scelerisque vehicula. Maecenas eget dapibus mauris, ac vehicula quam. Nullam tempor mi a eleifend molestie. Duis hendrerit pellentesque suscipit.
</p>
</div>
</body>

JavaScript

var resetea = function() {
	$('#visible').show();
	$('#oculto').hide();
};
$(document).ready(function(){
	resetea();
});
$('#reset').click(function(){
	resetea();
});
$('#ocultar').click(function(){
	$('#visible').slideUp();
});
$('#ver').click(function(){
	$('#oculto').slideDown();
});
$('#fadeOut').click(function(){
	$('#visible').fadeOut();
});
$('#fadeIn').click(function(){
	$('#oculto').fadeIn();
});