syntaxhelp.com Your online cheat sheet!

How to use JQuery to show . hide or bounce a text.

<script type="text/javascript">

    $(document).ready(function() {
        //hide the object with blink effect  
        $("#blink_out").click(function() {
            $("#object").fadeIn(2000).fadeOut(2000);
        });
        //show the object with blink effect  
        $("#blink_in").click(function() {
            $("#object").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
        });
        //bounce an object
        $("#bounce").click(function() {
            $("#object").fadeIn(100).animate({ top: "-=20px" }, 100).animate({ top: "+=20px" }, 100).animate({ top: "-=20px" }, 100)
		.animate({ top: "+=20px" }, 100).animate({ top: "-=20px" }, 100).animate({ top: "+=20px" }, 100);

        });
    });
</script>

To call the script

<p> 
  <a href="#" id="blink_out">Blink Out</a> &nbsp;&nbsp;&nbsp; <a href="#" id="blink_in">Blink In</a> &nbsp;&nbsp;&nbsp; <a href="#" id="bounce">Bounce</a>

</p>


    <div id="object" class="message"> Assignment Created </div>