jquery .animate() function [Archive]

creative creator

11-29-2010, 07:46 AM

Hi All,

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

can anyone help?

<!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

jscheuer1

11-29-2010, 08:51 AM

<!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 goes here

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

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.