jQuery Method How to - Use show() to create animation

Question

We would like to know how to use show() to create animation.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript"
  src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type='text/javascript'>
$(window).load(function(){<!-- www. jav  a2 s  . c  om-->
    var slide = function(){
        $('.slider').show("blind", {direction: "right" }, "slow");
    }
    setTimeout(slide,1000);
});
</script>
</head>
<body>
  <div class="slider"
    style="height: 200px; width: 200px; background-color: red; display: none" />
</body>
</html>

The code above is rendered as follows: