jquery implementation of the original artwork contrast curtain effect _jquery

Effect:

HTML code:

Copy Code code as follows:

<div class= "Vfx-image-wrap Special" >
<div class= "Before-image" style= "width:50%; Transition:all 0.3s ease 0s; " >

</div>
<div class= "After-image" >

</div>
<div class= "Divider-bar" style= "left:50%; Transition:all 0.3s ease 0s; " ></div>
</div>

JS Code:

Copy Code code as follows:

$ (function () {
Outside Div
var imagewrap = $ ('. Vfx-image-wrap '),
Foreground chart
Topimage = $ (this). Find ('. Before-image '),
Split Line
Divider = $ (this). Find ('. Divider-bar '),
Staybounce = $ ('. Toggle-function ');

Imagewrap.on ("MouseMove", function (e) {
Gotta localize top image and divider I only applies to this
var offsets = $ (this). Offset (),
Fullwidth = $ (this). Width (),
MouseX = E.pagex-offsets.left,
Topimage = $ (this). Find ('. Before-image '),
Divider = $ (this). Find ('. Divider-bar ');

if (MouseX < 0) {
MouseX = 0;
else if (MouseX > Fullwidth) {
MouseX = Fullwidth
}
$ (this). addclass (' special ');
Divider.css ({left:mousex, Transition: ' None '});
Topimage.css ({width:mousex, Transition: ' None '});
});
Staybounce.click (function () {
$ (this). Toggleclass (' Stay ');
});

Imagewrap.on ("MouseLeave", function () {
if (!staybounce.hasclass (' Stay ')) {
Divider.css ({left: ' 50% ', transition: ' All 3s '});
Topimage.css ({width: ' 50% ', transition: ' All 3s '});
}
});
});