Home > Article > Web Front-end > Panel sliding side display effect implemented by jQuery slidereveal_jquery
We use a jQuery plug-in: slidereveal.js, which can be used to control the left and right sliding out and hiding effects of the panel. Project address: https://github.com/nnattawat/slideReveal.
How to use
First load the jquery library file and slidereveal.js plug-in in the page.
Then place a panel element such as div#slider in the body, with customized content, and place an element that triggers the panel call, such as a button or a element.
Finally, directly call the slidereveal.js plug-in, the code is as follows:
Option settings
By default, the panel slides out from the left and "pushes" the main page content to the right, and the panel can be closed using the keyboard's "ESC" key.
Properties | Description | Default value |
width | Integer type, panel width. | 250 |
push | Boolean, set to true, the panel will "push" the main content of the page to one side when expanded. When set to false, the panel will expand above the main content of the page. | true |
position | String, set the direction of panel expansion and sliding, which can be set to "left" or "right" | "left" |
speed | Integer, panel expansion speed, unit: milliseconds. | 300 |
trigger | jQuery DOM selector, set page elements that can trigger panel display and hiding, such as $("#element") | Undefined |
autoEscape | Boolean type, sets whether to allow using the ESC key of the keyboard to hide the expanded panel. | true |
top | Integer, sets the distance between the panel and the upper part of the window. | 0 |
show | Callback function, called when the panel is expanded. | - |
shown | Callback function, called when the panel is expanded. | - |
hide | Callback function, called when the panel is hidden. | - |
show | Callback function, called when the panel is hidden. | - |
The slidereveal.js plug-in also provides expansion and hiding method calls. The code is as follows:
The above is all the content shared with you in this article. Friends in need can come and refer to it. I hope it will be helpful for everyone to become familiar with jQuery.