JQuery to achieve the original image contrast curtain effect

Effect:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201406/20140615155845.gif? 2014515155859 ">  
HTML code:

 
<div class="vfx-image-wrap special"> 
<div class="before-image" style="width: 50%; transition: all 0.3s ease 0s;"> 
<img alt="" src="js/VFX-before.jpg"> 
</div> 
<div class="after-image"> 
<img alt="" src="js/VFX-after.jpg"> 
</div> 
<div class="divider-bar" style="left: 50%; transition: all 0.3s ease 0s;"></div> 
</div> 

JS code:

 
$(function () { 
//The outer DIV
var imageWrap = $('.vfx-image-wrap'), 
//picture
topImage = $(this).find('.before-image'), 
//The divider
divider = $(this).find('.divider-bar'), 
stayBounce = $('.toggle-function'); 

imageWrap.on("mousemove", function (e) { 
// Gotta localize top image and divider so it 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' }); 
} 
}); 
});