Forum Moderators: open
Animation Properties and Values
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)
The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.
<html>
<head>
<style type="text/css">
p {
color: red;
}
</style>
<title>Test</title>
</head>
<body>
<form action="#">
<input type="button" value="Click Me" onclick="exIt('.class1');">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<div class="class1 class2 class3">
<p class="x"> lorem</p>
<p class="y"> ipsum</p>
<p class="z"> yadda</p>
</div>
<script>
function exIt(cl) {
$(cl + ' > p').animate({color:"#0f0"}, 600, function() {
$(cl + ' > p').delay(800).animate({color:"#00f"}, 1600, function() {
$(cl + ' > p').delay(800).hide();
});
});
}
</script>
</body>
</html>
