<!doctype html>
<html lang="en">
<head>
<title>jQuery :animation selector to select animated element</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   function myAnim(){
        $("#para-animatemultiple").animate({
            margin:'50px',
            width:'200px',
            height:'200px',
            opacity:0.6
        }, 'slow');
		$("#para-animatemultiple").animate({
            margin:'0',
            width:'100px',
            height:'100px',
            opacity:0.6
        }, 'slow', myAnim);
    };
	myAnim();
	$('.mybtn').click(function(){
		$( ":animated" ).toggleClass( "mydivshow" );
	});
});
</script>
<style>
.mydivshow{
	background:yellow !important;
}
.mydiv{
	width:100px;
	height:100px;
	background:#ccc;
	float:left;
	margin-right:10px;
}
</style>
</head>
<body>
<h2>jQuery :animation selector to select animated element</h2>	
<button type="button" class="mybtn">Click Me</button>
<p>When you click the above button, it select only the animating element and apply the jQuery effect.</p>
<div id="para-animatemultiple" class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
</body>
</html>

Go to Tutorialdeep Homepage