为什么动画对于前几个“选择”不起作用？我的下一个按钮？

Question

我会立即开始说我对 JQuery 相当陌生，所以如果您发现我的代码有一些明显的问题......请告诉我我做错了什么！

不管怎样，我一直在编写一个脚本来使用 z-index 和动画来淡入和淡出 div。它在大约 2-3 次点击后“起作用”，但前两次点击并没有像我希望的那样褪色或动画......这是为什么？

我只是将 javascript 放在这里，但如果您需要/想要更多代码，请告诉我。谢谢！

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

});

});

抱歉，这是其余的 HTML 和 CSS 代码...谢谢！

#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-->

Answer 1

试试这个，给你的 #next 和 #prev 按钮一个全局类

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

    });
});