Hovering over images to show another image whilst fading in & out I'm trying to figure out how to correctly hover over an image to fade in another image and when you move your mouse out, it would go fade back to the normal image.



$(document).ready(function(){

$('img').hover(
    function(){
        $(this).stop().fadeOut(function(){
        var $temp = $(this).attr('src');
        $(this).attr('src', $(this).attr('data-alt-src'));
        $(this).attr('data-alt-src', $temp);
        });

        $(this).fadeIn();
    },
    function(){
        $(this).stop().fadeOut(function(){
        var $temp = $(this).attr('data-alt-src');
        $(this).attr('data-alt-src', $(this).attr('src'));
        $(this).attr('src', $temp);
        });

        $(this).fadeIn();

    }
);
});
#main-wrapper {
width: 970px;
margin: 0 auto;
text-align: center;
}

img {
width: 200px;
}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Hover In/Out&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;script src= 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="main-wrapper"&gt;
        &lt;img src="frontside.jpg" data-alt-src="backside.jpg" alt="front side picture"&gt;
        &lt;img src="frontside.jpg" data-alt-src="backside.jpg" alt="front side picture"&gt;
        &lt;img src="frontside.jpg" data-alt-src="backside.jpg" alt="front side picture"&gt;
        &lt;img src="frontside.jpg" data-alt-src="backside.jpg" alt="front side picture"&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;




So far, it works as it should with one minor defect. If I were to quickly hover my mouse over the image and out, it would stay in the second image. I initially wanted to hover over the image to show the other image and then when I hover out from the image it would go back to its initial image.
You need to fix your indentation.

Code inside blocks gets one more level of indentation.

Here is what your indented JavaScript would look like:

$(document).ready(function () {

    $('img').hover(
    function () {
        $(this).stop().fadeOut(function () {
            var $temp = $(this).attr('src');
            $(this).attr('src', $(this).attr('data-alt-src'));
            $(this).attr('data-alt-src', $temp);
        });

        $(this).fadeIn();
    },

    function () {
        $(this).stop().fadeOut(function () {
            var $temp = $(this).attr('data-alt-src');
            $(this).attr('data-alt-src', $(this).attr('src'));
            $(this).attr('src', $temp);
        });

        $(this).fadeIn();

    });
});




Your CSS also has poor indentation.

Here is your indented CSS:

#main-wrapper {
    width: 970px;
    margin: 0 auto;
    text-align: center;
}

img {
    width: 200px;
}




In the two functions that you are passing to $('img').hover, you are doing pretty much the same thing. I recommend creating a separate function that takes two parameters for the data to swap.

Here is what I came up with:

/*
    Sets the .stop().fadeOut of an element to swap two properties of that element
    @param(jQuery Object) elem -- the element
    @param(string) oldSrc -- one element to swap
    @param(string) newSrc -- another element to swap
*/
function fadeSwapSrc(elem, oldSrc, newSrc) {
    elem.stop().fadeOut(function() {
        var $temp = elem.attr(oldSrc);
        elem.attr('src', elem.attr(newSrc));
        elem.attr(newSrc, $temp);
    }
}


Now, your code simply becomes:

$(document).ready(function () {

    $('img').hover(
    function () {
        fadeSwapSrc('src', 'data-alt-src');
        $(this).fadeIn();
    },

    function () {
        fadeSwapSrc('data-alt-src', 'src');
        $(this).fadeIn();
    });
});