Results 1 to 2 of 2

Thread: jquery .animate() function

  1. #1
    Join Date
    Apr 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default jquery .animate() function

    Hi All,

    I have wrote small script to increase the box width using jQuery .animate() function, but it's not working

    can anyone help?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $("#animate").click(function() {
        alert();
    	$("#content").animate({"height": "80px"},"fast");
    });
    </script>
    <style type="text/css">
    #content {
        background-color:#ffaa00;
        width:300px;
        height:30px;
        padding:3px;
    }
    </style>
    </head>
    
    <body>
    <input type="button" id="animate" value="Animate"/>
    <div id="content">Animate Height</div>
    </body>
    </html>
    Thanks...........in advance
    Last edited by jscheuer1; 11-29-2010 at 07:17 AM. Reason: format code, English usage

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <style type="text/css">
    #content {
        background-color:#ffaa00;
        width:300px;
        height:30px;
        padding:3px;
    }
    </style>
    </head>
    
    <body>
    <input type="button" id="animate" value="Animate"/>
    <div id="content">Animate Height</div>
    <script type="text/javascript">
    $("#animate").click(function() {
    	$("#content").animate({"height": "80px"},"fast");
    });
    </script>
    </body>
    </html>
    Please enclose code in:

    [CODE]
    code goes here
    [/CODE]

    tags so it will look like (as I've edited your above post to):

    Code:
    code goes here
    Notes:

    • I'm using the Google hosted version of jQuery in case yours is missing or corrupt.

    • The way your jQuery code is written it must come after the elements it's initializing have been parsed.
      • Look into jQuery's ready() and live() functions for alternatives.


    • An empty alert() will cause a fatal error. Always use a non-empty string value.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •