Jquery Image Slider with a slide down

Right now it seems to work fine except I keep running into 2 errors. When .desc slides down and it goes to the next image the old .desc from image goes on top of .desc of image two. Second error is if you hove over it and then take your mouse off of it and hover over it again the .desc goes crazy and goes up and down a few times. I cant figure out how to fix these two things any help would be greatly apreciated.

#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:开发者_StackOverflow社区 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>

---

You can solve your second problem by using jQuery's .stop() right before you start the slide animation. That way, when you go back and forth quickly, it won't build up in a queue. I'm afraid I don't understand what your first problem is, however. Maybe a little more elaboration? Or am I just being dense?

ex.

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