jQuery Slider that fades and slide at same time

Question

I've been trying to find a jQuery Slider that fades and slide at the same time but no sucess so far, so I've decided to try and create my own. Well, so far, I've managed to make it slide and barely fade, by barely I mean that in bigger screens it might look like the content is blinking.

This is my HTML :

<div id="slider">
    <div class="slide">
        <h1>A Phrase</h1>
    </div>
    <div class="slide">
        <h1>A Phrase</h1>
    </div>
    <div class="slide">
        <h1>A Phrase</h1>
    </div>
</div>

This is my jQuery :

var slider = $('#slider .slide'),
    winWidth = $(window).width();

slider.css({
    width: winWidth
});
$(window).resize(function(){
    winWidth = $(window).width();
    $(args).css({
        width: winWidth
    });
});

var slideW = slider.width(),
    slidesQty = slider.length,
    sliderFullW = slidesQty * slideW,
    slideMvCheck = winWidth/2;

$('#slider').css({
    width: sliderFullW
});

function cycleSlides(){
    $('#slider').animate({
        left: -winWidth
    }, {duration: 2000, queue: false}).fadeOut(700).fadeIn(2000, function(){
        $('#slider .slide:first-child').appendTo('#slider');
        $('#slider').css({left: 0});
    });

}

var autoSlide = setInterval(function () {
    cycleSlides();
}, 4000);

I need help tweaking the code, I've tried a lot of different things in the past two days, I've ran out of ideas and I'm not very good with jQuery.

Answer 1

So I had a crack at it anyway (see comments) and made this from it :

http://codepen.io/anon/pen/mJyBgj?editors=011

var gate = $(window);
var slider = $('#slider');
var slide = $('.slide');
var winWidth = gate.width();

slide.css({width: winWidth});

gate.resize(function() {
    winWidth = gate.width();
    slide.css({width: winWidth});
});

var slideW = slide.width(),
slidesQty = slide.length,
sliderFullW = slidesQty*slideW,
slideMvCheck = winWidth/2;

slider.css({width: sliderFullW});

function cycleSlides() {

    $('.slide').eq(0).animate({opacity: 0}, 700);
    $('.slide').eq(1).delay(700).animate({opacity: 1}, 2000);

    slider.animate({left: -winWidth}, 2000, function() {
        $('.slide').eq(0).appendTo(slider);
        slider.css({left: 0});
    });
}

var autoSlide = setInterval(function() {
    cycleSlides();
}, 4000);

The tricky thing with using a fade is that it will hide the element when opacity is zero, taking it out of (and interfering with) document flow. So I've made it an opacity animation (keeping physical dimensions intact). Hope that's closer to what was intended. Added a bit of CSS to set opacity to all but the first visible slide :

.slide:not(:first-of-type) {
opacity: 0;
}