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.

Copy code The code is as follows:

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.

Copy code The code is as follows:

Helloweba welcomes you!

Expand left

Finally, directly call the slidereveal.js plug-in, the code is as follows:

Copy code The code is as follows:

$('#slider').slideReveal({
trigger: $("#trigger")
});

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:

Copy code The code is as follows:

//Expand panel
$('#slider').slideReveal("show");
//Hide panel
$('#slider').slideReveal("hide");

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.