使用JS和HTML动态地（ish）在图像之间同时淡入淡出

Question

我不能为我的生活弄清楚为什么这不起作用。它似乎立即切换到下一个图像，然后在该图像上淡入和淡出，而不是在图像之间。任何帮助都是极好的？

    <div id="slider">
    <img src="slider/1.jpg" id="test"></img>
    <div style="padding-bottom: 2%;">                       
    <button onClick="slider(1)" class="lebutt">1m</button>
    <button onClick="slider(2)" class="lebutt">50km</button>
    <button onClick="slider(3)" class="lebutt">the moon</button>
    <button onClick="slider(4)" class="lebutt">mars</button>
    <script>
    function slider(x) {                                                    
    var images = $('#slider img');  
    var y = document.getElementById('test').getAttribute('src').slice(7,8);
    now = images.attr('src', "slider/" + y + ".jpg"); 
    last = now.filter(':visible');
    last.fadeOut();
    next = images.attr('src', "slider/" + x + ".jpg");
    next.fadeIn();
    }
    </script>
    </div>