{"id":26781657,"url":"https://github.com/pixelunion/jquery.revealer","last_synced_at":"2025-04-19T13:40:41.607Z","repository":{"id":24225796,"uuid":"27618117","full_name":"pixelunion/jquery.revealer","owner":"pixelunion","description":"Animate elements to and from display: none!","archived":false,"fork":false,"pushed_at":"2021-04-26T17:19:39.000Z","size":10,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":25,"default_branch":"main","last_synced_at":"2025-03-29T08:17:21.997Z","etag":null,"topics":["library"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixelunion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-06T01:44:23.000Z","updated_at":"2021-04-26T17:19:41.000Z","dependencies_parsed_at":"2022-08-22T14:00:48.145Z","dependency_job_id":null,"html_url":"https://github.com/pixelunion/jquery.revealer","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fjquery.revealer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fjquery.revealer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fjquery.revealer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fjquery.revealer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelunion","download_url":"https://codeload.github.com/pixelunion/jquery.revealer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249704619,"owners_count":21313147,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["library"],"created_at":"2025-03-29T08:17:25.712Z","updated_at":"2025-04-19T13:40:41.574Z","avatar_url":"https://github.com/pixelunion.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery.revealer\n\nAnimate elements to and from display: none!\n\n## Requirements\n\nThis plugin requires jQuery, and the [jquery.trend.js](https://github.com/PixelUnion/jquery.trend) plugin.\n\n## Usage\n\n```\n$('button.show').on('click', function() {\n  $('#my-element').revealer('show');\n});\n\n$('button.hide').on('click', function() {\n  $('#my-element').revealer('hide');\n});\n\n$('button.toggle').on('click', function() {\n  $('#my-element').revealer('toggle');\n});\n```\n\nRevealer doesn't actually change your element's styles--instead it adds classes in an order that allows you to transition smoothly.\n\n####`.animating`\nApply your initial transition state (e.g. `opacity: 0;`) as well as your `transition:` property with this class.\n\n####`.visible`\nApply your final transition state (e.g. `opacity: 1`) to this state.\n\n### caveat\nWe assume an inital default state of `display: none`. Therefore the above classes should also include a `display: block;` property.\n\n### Different transitions on in and out\nTo 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.\n\n### Setting a state without a transition\nTo skip the transitioning and force a specific display state, you may pass `true` as the second parameter to `show`, `hide`, or `toggle`:\n\n```\n$('.el').revealer('show', true);\n```\n\n### Get the current state\nTo check if an element is currently visible, use the `isVisible` function:\n\n```\nvar visible = $('.el').revealer('isVisible');\n```\n\n## Example\n\n```\n.element-to-reveal {\n  display: none;\n\n  \u0026.animating,\n  \u0026.visible {\n    display: block;\n  }\n\n  // initial state for enter transition\n  \u0026.animating-in {\n    transform: translateX(-100%);\n    transition: transform 0.3s ease;\n  }\n\n  // initial state for leave transition\n  \u0026.animating-out {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  // final states for both in and out\n  \u0026.visible {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n```\n\n### Or some working code:\n\nhttp://codepen.io/jnorth/pen/pJpGjj\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelunion%2Fjquery.revealer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelunion%2Fjquery.revealer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelunion%2Fjquery.revealer/lists"}