如何将jQuery fadeIn和fadeOut添加到鼠标事件函数中？

我正在使用jQuery更改鼠标事件（悬停）上的图像，但我无法找到为以下函数添加

fadeIn

和

fadeOut

的最佳方法

        var sourceIn = function () {
            var $this = $(this);
            var newSource = $this.data('alt-src');
            $this.data('alt-src', $this.attr('src'));
            $this.attr('src', newSource);
        }
        var sourceOut = function () {
            var $this = $(this);
            var newSource = $this.data('alt-src');
            $this.data('alt-src', $this.attr('src'));
            $this.attr('src', newSource);
        }

        $(function () {
            $('img.toggle').mouseenter(sourceIn);
            $('img.toggle').mouseleave(sourceOut);
        });

我已经尝试了很多方法来添加

fadeToggle

，但我不确定最好的技术是什么

---

jsidle示例：

而不仅仅是更改

src

，使用

fadeOut

和

fadeIn

$this.fadeOut(function() {
    $this.attr('src', newSource).fadeIn();
});

演示：