jquery – starter tutorial #3

If you haven’t checked the previous posts, please check the following
jquery – starter tutorial #2
jquery – starter tutorial #1

This post will give you more on the animation and design functions of jquery.

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $("#hide").click(function(){
        $(".hide").hide();
        $(".show").hide();
      });
    });

    $(document).ready(function(){
      $("#show").click(function(){
        $(".hide").show("slow");
        $(".show").show("fast");
      });
    });

    $(document).ready(function(){
      $("#toggle").click(function(){
        $(".toggle").slideToggle();
      });
    });

    $(document).ready(function(){
      $("#animate").click(function(){
        $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
      });
    });

    $(document).ready(function(){
      $("#fadeTo").click(function(){
        $(".fadeTo").fadeTo("slow",0.25);
      });
    });

</script>

</head>
<body>
<button id="hide">hide</button>
<button id="show">show</button>
<button id="toggle">toggle</button>
<button id="fadeTo">fadeTo</button>
<button id="animate">animate</button>

<div>show me</div>
<div>hide me</div>
<div>toggle me</div>
<div style="background:yellow;">fadeTo me</div>
<div style="background:#98bf21;height:100px;width:100px;position:relative">animate me</div>

</body>
</html>

Click the buttons to see the methods in action.