728x90
SMALL
#jQuery
#animate()
.animate
.animate() creates an animation effect.
grammar
.animate( properties [, duration ] [, easing ] [, complete ] )properties
Set properties that give animation effects. Possible attributes are:
- backgroundPositionX
- backgroundPositionY
- borderBottomWidth
- borderLeftWidth
- borderRightWidth
- borderSpacing
- borderTopWidth
- borderWidth
- bottom
- fontSize
- height
- left
- letterSpacing
- lineHeight
- margin
- marginBottom
- marginLeft
- marginRight
- marginTop
- maxHeight
- maxWidth
- minHeight
- minWidth
- opacity
- outlineWidth
- padding
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- right
- textIndent
- top
- width
- wordSpacing
duration
- The amount of time it takes for the animation effect to complete. The unit is 1/1000 second, default is 400.
- You can decide by fast or slow. Fast is equivalent to 200 and slow is equivalent to 600.
easing
- Determines how the animation effect works.
- Can be swing or linear, default is swing.
complete
Determines the action to take after the element disappears.
example1
Clicking the button changes the horizontal size of the blue div element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
#a {
width: 10%;
height: 100px;
background-color: #bbdefb;
}
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button' ).click( function() {
$( '#a' ).animate( {
width: '100%'
} );
} );
} );
</script>
</head>
<body>
<p><button>Click!</button></p>
<div id="a"></div>
</body>
</html>example2
This is an example comparing swing and linear. linear progresses at a constant speed.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
div {
margin: 10px 0px;
width: 10%;
height: 100px;
background-color: #e3f2fd;
}
#a { background-color: #bbdefb; }
#b { background-color: #ffcdd2; }
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button' ).click( function() {
$( '#a' ).animate( {
width: '100%'
}, 2000, 'swing' );
$( '#b' ).animate( {
width: '100%'
}, 2000, 'linear' );
} );
} );
</script>
</head>
<body>
<p><button>Click!</button></p>
<div id="a"></div>
<div id="b"></div>
</body>
</html>example3
After the div finishes its growing animation, it performs a disappearing animation.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
#a {
width: 10%;
height: 100px;
background-color: #bbdefb;
}
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button' ).click( function() {
$( '#a' ).animate( {
width: '100%'
}, 1000, function() {
$( this ).animate( {
width: '0%'
}, 1000 );
} );
} );
} );
</script>
</head>
<body>
<p><button>Click!</button></p>
<div id="a"></div>
</body>
</html>728x90
LIST