(^238) ❘ CHAPTER 8 ANIMATION AND EASING EFFECTS
value='5000'
min='100'
max='10000'
step='100'
name='exampleAnimationDuration'
id='exampleAnimationDuration' />
<input type='submit'
name='exampleAnimationGrow'
id='exampleAnimationGrow'
value='Grow' />
<input type='submit'
name='exampleAnimationShrink'
id='exampleAnimationShrink'
value='Shrink' />
elliott
(Elliott)
#1
The following CSS shows only the portion that changes from Example 8-3.
div#exampleDialog h4 {
border: 1px solid rgb(50, 50, 50);
background: pink;
border-radius: 4px;
padding: 5px;
margin: 0 0 10px 0 ;
}
The following script demonstrates the animate() method.
$(document).ready(
function()
{
var animating = false;
$('input#exampleAnimationGrow').click(
function(event)
{
event.preventDefault();
if (!animating)
{
animating = true;
var easing = $('select#exampleAnimationEasing').val();
var duration = parseInt($('input#exampleAnimationDuration').val());
$('div#exampleDialog').animate(
{
width : '400px',
height : '350px',
marginLeft : '-210px',
marginTop : '-185px'
},
[http://www.it-ebooks.info](http://www.it-ebooks.info)