jQuery UI Effects - Hide Demo
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
$(function() {
//run the currently selected effect
function runEffect(){
//get effect type from
var selectedEffect = $('#effectTypes').val();
//most effect types need no options passed by default
var options = {};
//check if it's scale, transfer, or size - they need options explicitly set
if(selectedEffect == 'scale'){ options = {percent: 0}; }
else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; }
else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
//run the effect
$("#effect").hide(selectedEffect,options,500,callback);
};
//callback function to bring a hidden box back
function callback(){
setTimeout(function(){
$("#effect:hidden").removeAttr('style').hide().fadeIn();
}, 1000);
};
//set effect from select menu value
$("#button").click(function() {
runEffect();
return false;
});
});
Hide
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
Click the button above to preview the effect.