Why does animate not work for the first few 'selections' of my next button?

Question

I'll just start right off the bat and say I'm fairly new to JQuery, so if you see some glaring issues with my code....let me know what I'm doing wrong!

Either way, I've been working on a script to fade divs in and out using the z-index and animate. It "works" after about 2-3 clicks, but the first two clicks do not fade or animate as I was hoping....why is that?

I'll just throw javascript up here, but if you need/want more code, just let me know. Thanks!

$(document).ready(function() {

//Slide rotation/movement variables
var first = $('#main div.slide:first').attr('title');
var last = $('#main div.slide').length;
//Needed for the next/prev buttons
var next;

//Set the first div to the front, and variable for first div
var $active = $('#main div.slide[title='+first+']');

//Hide the links until the div is hovered over and take them away when mouse leaves
$('#main').children('a').hide();
$('#main').mouseenter(function() {
    $('#main').children('a').fadeIn(750);
    }).mouseleave(function() { 
        $('#main').children('a').fadeOut(750);
        });

$active.css('z-index', '4');

$('#main #next').click(function() {

    if ((next = parseInt($active.attr('title')) + 1) > last) {
        next = 1;
        }

    $active.css('z-index', '0').stop().animate({opacity: 0}, 1000);

    $active = $('#main div[title='+next+']').css('z-index', '4').stop().animate({opacity : 1}, 1000);

});

});

Sorry, here is the rest of the code HTML and CSS...thanks!

#cust-care {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
position: relative;
margin: 0 auto;
width: 470px;
height: 175px;
}

custWidget {

margin: 0 auto;
overflow: hidden;
position: relative;
width: 470px;
height: 175px;
}

custWidget div {

position: absolute;
margin: 0;
height: 175px;
width: 470px;
background: #fff;
z-index: 0;
}

custWidget div.active {

z-index: 4;
}

custWidget div ul {

list-style: none;
padding: 25px 0 0 25px;
}

custWidget div ul li {

width: 140px;
float: left;
    list-style-type: none;
z-index: 5;
}

custWidget div ul li a {

position: relative;
display: block;
width: 140px;
color: #000;
text-decoration: none;
text-align: center;
}

custWidget #next {

position: absolute;
margin: 55px 0 0 430px;
padding: 5px;
display: block;
background: #000;
width: 35px;
height: 35px;
line-height: 35px;
color: #fff;
text-decoration: none;
z-index: 10;
}

custWidget #next:hover {

text-decoration: underline;
}

custWidget #prev {

position: absolute;
margin: 55px 0;
padding: 5px;
display: block;
background: #000;
width: 35px;
height: 35px;
line-height: 35px;
color: #fff;
text-decoration: none;
z-index: 10;
}

custWidget #prev:hover {

text-decoration: underline;
}

<div id="custCare">
<div id="custWidget">
    <a id="next">next</a>
    <a id="prev">prev</a>

    <div title="1" class="slide">
        <ul>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
        </ul>
    </div>

    <div title="2" class="slide">
        <ul>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
        </ul>
    </div>

    <div title="3" class="slide">
        <ul>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
        </ul>
    </div>
</div><!--End main-->