Optimization of Javascript Function swapping out images for gifs Im working on a project where a grid of images are loaded all at once. when the mouse is on hover a certain image, a corresponding gif fades in and then fades out when the mouse moves away from the image. 

I was able to get a working fiddle with the code i currently have. i have about 20 images that require this desired effect but my code is long and i feel like there is a better way to write my function where it can fade in and out as well as swapping out the images for gifs. Can someone help/point me in the right direction. still learning here!

code:

HTML
&lt;figure&gt;
&lt;img src="http://reneinla.com/tasha/style/images/stills/FORD-SUPER-BOWL.jpg" alt="" class="img-ford" onmouseover="onHover();" onmouseout="offHover();"/&gt;
&lt;/figure&gt;
&lt;figure&gt;
&lt;img src="http://reneinla.com/tasha/style/images/stills/OPERATOR.jpg" alt="" class="img-op" onmouseover="onHover1();" onmouseout="offHover1();"/&gt;
&lt;/figure&gt;
&lt;figure&gt;
&lt;img src="http://reneinla.com/tasha/style/images/stills/OPERATOR.jpg" alt="" class="img-op1" onmouseover="onHover2();" onmouseout="offHover2();"/&gt;
&lt;/figure&gt;
&lt;figure&gt;
&lt;img src="http://reneinla.com/tasha/style/images/stills/FORD-SUPER-BOWL.jpg" alt="" class="img-ford1" onmouseover="onHover3();" onmouseout="offHover3();"/&gt;
&lt;/figure&gt;

JAVASCRIPT
$(document).ready(function () {
    onHover();
    offHover();
    onHover1();
    offHover1();
    onHover2();
    offHover2();
    onHover3();
    offHover3();
});
function onHover()
{
    $(".img-ford").attr('src', 'http://reneinla.com/tasha/style/images/gifs/giphy.gif');

}
function offHover()
{
    $(".img-ford").attr('src', 'http://reneinla.com/tasha/style/images/stills/FORD-SUPER-BOWL.jpg');
}
function onHover1()
{
    $(".img-op").attr('src', 'http://reneinla.com/tasha/style/images/gifs/giphy.gif');
}
function offHover1()
{
    $(".img-op").attr('src', 'http://reneinla.com/tasha/style/images/stills/OPERATOR.jpg');
}
function onHover2()
{
    $(".img-op1").attr('src', 'http://reneinla.com/tasha/style/images/gifs/giphy.gif');

}
function offHover2()
{
    $(".img-op1").attr('src', 'http://reneinla.com/tasha/style/images/stills/FORD-SUPER-BOWL.jpg');
}
function onHover3()
{
    $(".img-ford1").attr('src', 'http://reneinla.com/tasha/style/images/gifs/giphy.gif');
}
function offHover3()
{
    $(".img-ford1").attr('src', 'http://reneinla.com/tasha/style/images/stills/OPERATOR.jpg');
}


UPDATE

Thanks for the help!
i was able to do some research and found something that works. 
new fiddle
I think you could reduce a loot your code and do it in a way that it is more clear and effective.

First of all this part you could just remove without concerns:

$(document).ready(function () {
    onHover();
    offHover();
    onHover1();
    offHover1();
    onHover2();
    offHover2();
    onHover3();
    offHover3();
});


The reason, is because those functions are intended to be called on events triggering. This is the logic reason.
The functional reason, is that at the end you have the same situation of the beginning.

If your intention was to provide some sort of effect here, it is better to have a dedicated function to this. First of all because those kind of effects could change in time for different reasons than the event handlers.
Second reason is because the meaning is much evident.

I thin you could put all the url in your HTML using the data attribute:

&lt;figure&gt;
 &lt;img src="#" alt="" class="img-ford"
   data-out="/tasha/style/images/gifs/giphy.gif"
   data-out="/tasha/style/images/stills/FORD-SUPER-BOWL.jpg"/&gt;
&lt;/figure&gt;


You can avoid to place the event handlers directly in HTML code, this could be done in the $(document).ready() section on startup.

Now you can have a function to initialize your images:

function initImages() {
    $('img').each(function(img) {
        $(img).prop('src', $(img).data('out'));
     });
}


Maybe you have to take care of the selector to get only and all the images you want to operate on.

Than start the initialization:

$(function() {
     initImages();
     $('img').on('mouseover', imageMouseOver);
     $('img').on('mouseout', imageMouseOut);
 });


This is the short version of $(document).ready() in jQuery.

Then your functions:

function imageMouseOver(event) {
    $(this).prop('src', $(this).data('over'));
}


And the same for out:

function imageMouseOut(event) {
    $(this).prop('src', $(this).data('out'));
}


Of course you can reduce more with a sort of toggle function, but have used 2 just for sake of clarity.