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);

});

});