I wrote a code to change the images on a hover. 

The problem is that when the mouse moves fast from one "item" to another, it messes up images. 

How to fix that?

HTML:

```
<div class="items">
    <div class="item">
        <a href="#">
            <img src="img/icon1.png" data-original="img/icon1.png" data-hover="img/icon1-hover.png">
            <span>Title</span>
        </a>
    </div>

    <div class="item">
        <a href="#">
            <img src="img/icon2.png" data-original="img/icon2.png" data-hover="img/icon2-hover.png">
            <span>Title</span>
        </a>
    </div>

</div>

```

JS:

```
$('.items .item a').hover(function(){
newsrc = $(this).children('img').data("hover");
$(this).children('img').fadeOut(100, function() {
    $(this).attr('src', newsrc).fadeIn();
}); 
}, function(){
    oldsrc = $(this).children('img').data("original");
    $(this).children('img').fadeOut(100, function() {
        $(this).attr('src', oldsrc).fadeIn();
    });
});

```