jQuery Slider that fades and slide at same time

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.