<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>

$(function () { //外DIV var imageWrap = $('.vfx-image-wrap'), //前景图 topImage = $(this).find('.before-image'), //分割线 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' }); } }); });