jQuery – :animated Selector

The jQuery animated selector select all elements that are in the progress of an animation at the time the selector is run.

Source Code

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
h2 { background:#98bf21;height:100px;width:100px; }
h2.colored { background:red; }
  </style>
</head>
<body>
<button>Click Here</button>
<h2></h2>
<br/>
  
<script>
function animated(){
	$('h2').animate({
	    width: ['toggle', 'swing'],
	    height: ['toggle', 'swing'],
	    opacity: 'toggle'
	}, 5000, 'linear',animated);
}

animated(); 
jQuery("button").click(function () {
	$(":animated").toggleClass("colored");
});
</script>
</body>
</html>

Demo

Following example change the color of any element that is animated.

,

No comments yet.

Leave a Reply