왜 애니메이션이 다음 버튼의 처음 몇 가지 '선택'에 적용되지 않습니까?

Question

방금 ​​바로 시작하겠습니다. JQuery를 처음 접했을 때 코드에 눈에 띄는 문제가 있으면 ... 제가 잘못하고있는 것을 알려주세요!

어느 쪽이든, 나는 z- 인덱스를 사용하여 divs를 페이드 인하거나 사라지게하는 스크립트 작업을 해왔다. 약 2-3 번의 클릭 후 "작동"하지만 처음 2 번의 클릭은 내가 기대했던 것처럼 사라지지 않거나 움직이지 않습니다. 왜 그런가요?

자바 스크립트를 여기에 올리 겠지만 더 많은 코드가 필요하거나 필요하다면 알려주세요. 감사!

});

죄송합니다. 나머지 코드는 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 사업부 UL {

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

custWidget 사업부의 UL 리튬 {

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

custWidget 사업부의 UL 리 a를 {

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

custWidget의 # 다음 {

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의 # 다음 : 가져가 {

text-decoration: underline; 
} 

,451,515,

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 : 가져가 {

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

이 시도하고 # 다음과 #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); 

    }); 
}); 

의 클래스를 제공