October 5, 2009 —

How can I create an easing effect with jQuery’s hide function?

If you hide several elements located one nextto another, you can assign increasingly faster speed to hiding each element, for example like this:

<script type=”text/javascript”>
$(document).ready(function(){
$(‘:submit’).click(function () {
$(‘#veryslowhide’).hide(‘4000’);
$(‘#slowhide’).hide(‘3000’);
$(‘#fasthide’).hide(‘2000’);
$(‘#fasthide’).hide(‘1000’);
});
});
</script>

<script type=”text/javascript”>$(document).ready(function(){
$(‘:submit’).click(function () {$(‘#slowhide’).hide(‘1000’);$(‘#fasthide’).hide(‘300’);});
});</script>