Yellow paragraph simultaneously changes height and width.
Grey paragraph first changes height and then width.
Here's the full code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
p.yellow {
background: yellow;
padding: 5px;
}
p.grey {
background: #CCCCCC;
padding: 5px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("p.yellow")
.animate({"height": "300px"}, {"queue": false, "duration": 5000})
.animate({"width": "450px"}, { "duration": 5000});
$("p.grey")
.animate({"height": "300px"}, { "duration": 5000})
.animate({"width": "450px"}, { "duration": 5000});
});
</script>
</head>
<body>
<div id="wrapper">
<p class="yellow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quam nisl, imperdiet at viverra sit amet, fermentum a sem. Aliquam ut erat urna. Proin consequat velit felis. Vestibulum sed accumsan eros. Vivamus odio leo, interdum tristique vehicula vel, viverra quis lacus. Proin adipiscing nulla non tellus fermentum a accumsan tortor semper. Donec vulputate vulputate gravida. Cras dignissim blandit est, et mattis mi tempus porta. Pellentesque eget orci mauris, blandit laoreet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quam nisl, imperdiet at viverra sit amet, fermentum a sem. Aliquam ut erat urna
</p>
<p class="grey">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quam nisl, imperdiet at viverra sit amet, fermentum a sem. Aliquam ut erat urna. Proin consequat velit felis. Vestibulum sed accumsan eros. Vivamus odio leo, interdum tristique vehicula vel, viverra quis lacus. Proin adipiscing nulla non tellus fermentum a accumsan tortor semper. Donec vulputate vulputate gravida. Cras dignissim blandit est, et mattis mi tempus porta. Pellentesque eget orci mauris, blandit laoreet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quam nisl, imperdiet at viverra sit amet, fermentum a sem. Aliquam ut erat urna
</p>
</div>
</body>
</html>
Note yellow highlighted word "queue" that makes changes at the same time.
No comments:
Post a Comment