JQuery圖像滑塊與滑下來

Question

現在它似乎工作正常，除非我繼續遇到2個錯誤。當.desc滑下並轉到下一個圖像時，圖像中的舊.desc將位於圖像2的.desc的頂部。第二個錯誤是，如果你把它放在上面，然後把鼠標從它上面移開，再把鼠標懸停在它上面，.desc會變得瘋狂並且會上下幾次。我無法弄清楚如何解決這兩件事，任何幫助都會大大降低。

#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

您可以通過使用解決您的第二個問題jQuery的.stop()啓動幻燈片動畫權之前。這樣，當你快速來回時，它不會堆積在隊列中。但是，恐怕我不明白你的第一個問題是什麼。也許更詳細一點？或者我只是密集？

ex。

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