I wrote a script that would change example.jpg to example-color.jpg (.png, .gif would work too) on mouse hover and changes it back on mouse leave. I'm making a portfolio, and I have examples of my work in black and white thumbnails, on hover they switch to colored ones. I'm just wondering if I did this in a redundant or 'wrong' way. is it poor how I have functions in variable, and to call it as such?$(function () {        var hoverImg = function() {            var imgSrc = $(this).attr('src');            var newSrc = imgSrc.slice(0, -4) + '-color.jpg';            var isColor = imgSrc.split(-).pop();            var notColor = (imgSrc.slice(0, - 10) +'.jpg');            if ( isColor !== 'color.jpg' ) {                $(this).attr('src', newSrc);            } else {                $(this).attr('src', notColor);            }         }        var captionImg = function() {            $(this).children('.gallery-caption').toggleClass('up');         }  $('.gallery').on('mouseenter mouseleave', '.gallery-item img', hoverImg);    $('.gallery').on('mouseenter mouseleave', '.gallery-item', captionImg);});
Change example.jpg to example-color.jpg on hover
javascript;jquery;performance