V1.0.0 Release Notes: The main thing you must remember is that if you want to have an animation that starts off unseen, you must give the tag you want animated a display: none
in CSS.
All values are default values that you can change. Methods
Description: Slide in from the left side. .slideInLeft
Usage:
$('tag').slideInLeft({speed:400, distance: '100px', startOpacity: 0, opacitySpeed: 400});
Run down of the settings:
speed
: How fast the animation animates.distance
: How far away the animation begins.startOpacity
: How opaque the tag starts when the animation starts.opacitySpeed
: How fast the opacity changes during the animation.Description: Slide in from the right side. .slideInRight
Usage:
$('tag').slideInRight({speed: 400, distance: '100px', startOpacity: 0, opacitySpeed: 400});
Run down of the settings:
speed
: How fast the animation animates.distance
: How far away the animation begins.startOpacity
: How opaque the tag starts when the animation starts.opacitySpeed
: How fast the opacity changes during the animation.Description: Slide in from the top. Usage: .slideInDown
$('tag').slideInDown({speed: 400, distance: '100px', startOpacity: 0, opacitySpeed: 400, comeDown: true, comeUp: null});
Run down of the settings:
speed
: How fast the animation animates.distance
: How far away the animation begins.startOpacity
: How opaque the tag starts when the animation starts.opacitySpeed
: How fast the opacity changes during the animation.comeDown
: Tells the animation to come from the top.comeUp
: Tells the animation to come from the bottom.Description: Slide in from the bottom. .slideInUp
Usage:
$('tag').slideInUp({speed: 400, distance: '100px', startOpacity: 0, opacitySpeed: 400, comeDown: true, comeUp: null});
Run down of the settings:
speed
: How fast the animation animates.distance
: How far away the animation begins.startOpacity
: How opaque the tag starts when the animation starts.opacitySpeed
: How fast the opacity changes during the animation.comeDown
: Tells the animation to come from the top.comeUp
: Tells the animation to come from the bottom.Description: Slide in from any corner. .slideInDiagonal
Usage:
$('tag').slideInDiagonal({speed: 400, distance: '100px', startOpacity: 0, opacitySpeed: 400, left: true, right: null comeDown: null, comeUp: null});
Note: You must choose either
comeDown
or comeUp
for the animation to run. You can look at the example page to see an example of a diagonal animation.Run down of the settings:
speed
: How fast the animation animates.distance
: How far away the animation begins.startOpacity
: How opaque the tag starts when the animation starts.opacitySpeed
: How fast the opacity changes during the animation.left
: Tells the animation to come from the left portion of the tag.right
: Tells the animation to come from the right portion of the tag.comeDown
: Tells the animation to come from the top.comeUp
: Tells the animation to come from the bottom.