Javascript 使用JS从大图像转换为小图像

我有一个标题，它使用两个图像作为背景，一个在网页顶部滚动时出现，另一个较小的图像在网页向下滚动时出现。演示可在此处获得：

harrisonbh.com/dev/transitions

我希望两者之间的转换是平稳的，但我对JavaScript一点也不熟悉，所以我完全迷路了

标头div转换的代码为：

$(function(){
    $('#header').data('size','big');
});

$(window).scroll(function(){
    if($(document).scrollTop() > 0)
    {
        if($('#header').data('size') == 'big')
        {
            $('#header').data('size','small');
            $('#header').stop().animate({
                height:'100px'
            },600);

            $('#logo').stop().animate({
                height: '100px'
            },600);

           document.getElementById("logo").style.backgroundImage="url('hub_test_files/arih_header_v2_small.png')";
        }
    }
    else
    {
        if($('#header').data('size') == 'small')
        {
            $('#header').data('size','big');
            $('#header').stop().animate({
                height:'275px'
            },600);

            $('#logo').stop().animate({
                height: '272px'
            },600);

            document.getElementById("logo").style.backgroundImage="url('hub_test_files/arih_header_v2.png')";
        }  
    }
});

我尝试过CSS和JS转换，但它们似乎都不起作用，所以对于现在和这个问题的未来观众来说，有没有办法在JS中的较大图像和较小图像之间进行转换？多谢各位

---

注意：我用来更改标题的网站不是我的，只是我在尝试，但我打算将最终代码提供给所有者。

有人能帮忙吗？