Pourquoi l'animation ne fonctionne-t-elle pas pour les premières sélections de mon prochain bouton?

Question

Je vais commencer tout de suite et dire que je suis assez nouveau à JQuery, donc si vous voyez des problèmes flagrants avec mon code .... laissez-moi savoir ce que je fais mal!

De toute façon, j'ai travaillé sur un script pour fondre des divs en utilisant l'index z et l'animation. Il "fonctionne" après environ 2-3 clics, mais les deux premiers clics ne se fanent pas ou n'animent pas comme j'espérais .... pourquoi est-ce?

Je vais jeter javascript ici, mais si vous avez besoin de plus de code, faites le moi savoir. Merci!

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

}); 

});

Désolé, voici la suite du code HTML et CSS ... merci!

#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

Essayez et donner à vos boutons #next et #prev une classe de mondiale

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

    }); 
});