https://github.com/pixelunion/jquery.revealer
Animate elements to and from display: none!
https://github.com/pixelunion/jquery.revealer
library
Last synced: about 1 year ago
JSON representation
Animate elements to and from display: none!
- Host: GitHub
- URL: https://github.com/pixelunion/jquery.revealer
- Owner: pixelunion
- License: mit
- Created: 2014-12-06T01:44:23.000Z (over 11 years ago)
- Default Branch: main
- Last Pushed: 2021-04-26T17:19:39.000Z (about 5 years ago)
- Last Synced: 2025-03-29T08:17:21.997Z (over 1 year ago)
- Topics: library
- Language: JavaScript
- Size: 9.77 KB
- Stars: 4
- Watchers: 25
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jquery.revealer
Animate elements to and from display: none!
## Requirements
This plugin requires jQuery, and the [jquery.trend.js](https://github.com/PixelUnion/jquery.trend) plugin.
## Usage
```
$('button.show').on('click', function() {
$('#my-element').revealer('show');
});
$('button.hide').on('click', function() {
$('#my-element').revealer('hide');
});
$('button.toggle').on('click', function() {
$('#my-element').revealer('toggle');
});
```
Revealer doesn't actually change your element's styles--instead it adds classes in an order that allows you to transition smoothly.
####`.animating`
Apply your initial transition state (e.g. `opacity: 0;`) as well as your `transition:` property with this class.
####`.visible`
Apply your final transition state (e.g. `opacity: 1`) to this state.
### caveat
We assume an inital default state of `display: none`. Therefore the above classes should also include a `display: block;` property.
### Different transitions on in and out
To apply different transitions for enter and leave, use `.animating-in` and `.animating-out` to declare different initial transition states. `.visible` will then include the final state for both in and out.
### Setting a state without a transition
To skip the transitioning and force a specific display state, you may pass `true` as the second parameter to `show`, `hide`, or `toggle`:
```
$('.el').revealer('show', true);
```
### Get the current state
To check if an element is currently visible, use the `isVisible` function:
```
var visible = $('.el').revealer('isVisible');
```
## Example
```
.element-to-reveal {
display: none;
&.animating,
&.visible {
display: block;
}
// initial state for enter transition
&.animating-in {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
// initial state for leave transition
&.animating-out {
opacity: 0;
transition: opacity 0.2s ease;
}
// final states for both in and out
&.visible {
transform: translateX(0);
opacity: 1;
}
}
```
### Or some working code:
http://codepen.io/jnorth/pen/pJpGjj