Effect:
HTML code:
JS Code:
$ (Function () {// external DIV var imageWrap = $ ('. vfx-image-wrap '), // foreground image 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 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: '000000', transition: 'All. 3 s '}); topImage.css ({width: '000000', transition: 'All. 3 s '});}});});
Source File Download: address 1