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-p2179开发者_如何学Go17178253030841836x_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-->

---

Try this and give your #next and #prev buttons a class of global

$(document).ready(function() {

//Slide rotation/movement variables
var first = $('#main div.slide:first').attr('title'),
    last = $('#main div.slide').length,
    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
$('.global').hide();
$('#main')
    .mouseenter(function() {
        $('.global')
            .fadeIn(750);
    }), $('#main')
            .mouseleave(function() { 
        $('.global')
            .fadeOut(750);
        });

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

$('#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);

    });
});