Jquery Image Slider avec une glissière vers le bas

Question

À l'heure actuelle, il semble bien fonctionner, sauf que je continue à courir dans 2 erreurs. Lorsque .desc glisse vers le bas et passe à l'image suivante, l'ancien .desc de l'image passe au-dessus de .desc de l'image deux. La seconde erreur est que si vous la survolez et que vous la retirez de votre souris pour la survoler de nouveau, le .desc devient fou et monte et descend plusieurs fois. Je n'arrive pas à comprendre comment résoudre ces deux choses toute aide serait grandement appréciée.

#scrollWork { 
    padding: 50px 50px 100px 50px; 
    background: #020303; 
    position: relative; 
    width: 924px; 
} 


.desc { 
    width: 287px; 
    height:250px; 
    border: solid 3px #0e0f0e; 
    padding: 10px 0px 0px 10px; 
    background: #121010; 
    display: none; 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 101; 
    filter:alpha(opacity=80); 
    opacity: 0.8; 

} 

.desc strong { 
    color:#262525; 
    font-size: 15px; 
} 

.desc p { 
    margin-left: 10px; 
} 

.desc a { 
    color:#FF02FE; 
    text-decoration: none; 
} 

.desc a:hover { 
    text-decoration: underline; 

} 


.window { 
    height:355px; width: 924px; 
    overflow: hidden; 
    position: relative; 
} 
.image_reel { 
    position: absolute; 
    top: 0; left: 0; 
} 
.image_reel img {float: left;} 


    /*--Paging Styles--*/ 
.paging { 
    width: 924px; height:47px; 
    z-index: 100; 
    text-align: center; 
    line-height: 40px; 
    display: none; 
} 
.paging a { 
    padding: 5px; 
    text-decoration: none; 
    color: #fff; 
} 

.paging a.active { 
    font-weight: bold; 
    background: #9502ad; 
    border: 1px solid #6b2f74; 
    -moz-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    -webkit-border-radius: 3px; 
} 





//Set Default State of each portfolio piece 
$(".paging").show(); 
$(".paging a:first").addClass("active"); 

//Get size of images, how many there are, then determin the size of the image reel. 
var imageWidth = $(".window").width(); 
var imageSum = $(".image_reel img").size(); 
var imageReelWidth = imageWidth * imageSum; 

//Adjust the image reel to its new size 
$(".image_reel").css({'width' : imageReelWidth}); 

//Paging + Slider Function 
rotate = function(){  
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide 
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide 

    $(".paging a").removeClass('active'); //Remove all active class 
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 

    //Slider Animation 
    $(".image_reel").animate({ 
     left: -image_reelPosition 
    }, 500); 

}; 

//Rotation + Timing Event 
rotateSwitch = function(){   
    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds 
     $active = $('.paging a.active').next(); 
     if ($active.length === 0) { //If paging reaches the end... 
      $active = $('.paging a:first'); //go back to first 
     } 
     rotate(); //Trigger the paging and slider function 
    }, 10000); //Timer speed in milliseconds (3 seconds) 
}; 

rotateSwitch(); //Run function on launch 

//On Hover 
$(".image_reel a").hover(function() { 
    clearInterval(play); //Stop the rotation 
}, function() { 
    rotateSwitch(); //Resume rotation 
});  

//slide up and down when hover over heading 2 
$(".window").hover(function(){ 
    // slide toggle effect set to slow you can set it to fast too. 
    $(".desc").eq($('.paging a.active').attr("rel") - 1).slideToggle("slow"); 
    return true; 
}); 

//On Click 
$(".paging a").click(function() {  
    $active = $(this); //Activate the clicked paging 
    //Reset Timer 
    clearInterval(play); //Stop the rotation 
    rotate(); //Trigger rotation immediately 
    rotateSwitch(); // Resume rotation 
    return false; //Prevent browser jump to link anchor 
}); 






<div id="scrollWork"> 
    <div class="title"> 
     <h2 class="titleWork">Work</h2> 
     <ul class="pagenav"> 
      <li class="pagenavTitle">Navigate To:</li> 
      <li class="pagenavWork"><a title="work" href="#scrollWork">Work</a></li> 
      <li class="pagenavServices"><a title="services" href="#scrollServices">services</a></li> 
      <li class="pagenavAbout"><a title="about" href="#scrollAbout">about</a></li> 
      <li class="pagenavContact"><a title="contact" href="#scrollContact">contact</a></li> 
     </ul> 
    </div> 
<div class="window"> 
    <div class="image_reel"> 
     <a href="#?w=700" rel="popupWork-1" class="poplight"><img src="image1.png" width="924" height="345" alt="ProZap Business Cards" /></a> 
     <a href="#?w=700" rel="popupWork-2" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 2" /></a> 
     <a href="#?w=700" rel="popupWork-3" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 3" /></a> 
     <a href="#?w=700" rel="popupWork-4" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 4" /></a> 
     <a href="#?w=700" rel="popupWork-5" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 5" /></a> 
    </div> 
    <div class="descriptions"> 
     <div class="desc"><strong>Client</strong> 
      <p>Snap</p> 
      <strong>URL</strong> 
      <strong>Date</strong> 
      <p>December 2009</p> 
      <strong>Task</strong> 
      <p>Design</p> 
      <strong>Tools</strong> 
      <p>Photoshop, Illustrator</p> 
     </div> 
     <div class="desc"><strong>Client</strong> 
      <p>ProZap</p> 
      <strong>URL</strong> 
      <strong>Date</strong> 
      <p>January 2010</p> 
      <strong>Task</strong> 
      <p>Design</p> 
      <strong>Tools</strong> 
      <p>Photoshop, Illustrator</p> 
     </div> 
     <div class="desc"><strong>Client</strong> 
      <p>Vestax Spin</p> 
      <strong>URL</strong> 
      <strong>Date</strong> 
      <p>October 2009</p> 
      <strong>Task</strong> 
      <p>Design, IPB, Template Engine, SEO</p> 
      <strong>Tools</strong> 
      <p>Photoshop, IPB</p> 
     </div> 
     <div class="desc"><strong>Client</strong> 
      <p>Vestax Spin</p> 
      <strong>URL</strong> 
      <strong>Date</strong> 
      <p>Febuary 2010</p> 
      <strong>Task</strong> 
      <p>Design</p> 
      <strong>Tools</strong> 
      <p>Photoshop, Illustrator</p> 
     </div> 
     <div class="desc"><strong>Client</strong> 
      <p>Vestax Spin</p> 
      <strong>URL</strong> 
      <strong>Date</strong> 
      <p>January 2010</p> 
      <strong>Task</strong> 
      <p>Design, Front-end Development, WordPress Integration, SEO</p> 
      <strong>Tools</strong> 
      <p>Photoshop, Dreamweaver</p> 
     </div> 
    </div> 
</div> 
<div class="paging"> 
    <a href="#" rel="1">Snap</a> | 
    <a href="#" rel="2">ProZap</a> | 
    <a href="#" rel="3">Movie Loons</a> | 
    <a href="#" rel="4">Creature Studios</a> | 
    <a href="#" rel="5">Project Named 5</a> 
</div> 

Answer 1

Vous pouvez résoudre votre deuxième problème en utilisant .stop() de jQuery juste avant de commencer l'animation de diapositives. De cette façon, quand vous faites des allers-retours rapides, cela ne s'accumule pas dans une file d'attente. J'ai peur de ne pas comprendre votre premier problème. Peut-être un peu plus d'élaboration? Ou suis-je juste dense?

ex.

$('.myCoolMenu').stop().slideDown();