CODEWITHSUNDEEP
jqueryhtmlcss
max
max

Reputation: 3736

Mouseover animation keeps on going instead of resetting to original position on fast moves

hi here is my live page

http://mehrdadkhoshbakht.com/test/index.html

there is a jquery sliding animation on the header my problem is with those little gray slideup dives on the bottom of the sliding pictures they suppose to slide up on mouseover and then reset to their original position afterward and they do on slow moves

animate :

sub_div.animate({top:"-=20"},500);})

and reset :

    $('.sub').hide();
    $('.sub').css('top','190px' );

but if I move mouse very fast on and off of the pics that title dives keeps on coming up. but I do reset their position at the beginning of the code so this doesn't happen but still no luck

I did try 

sub_div.stop(true).animate({top:"-=20"},500);})

it didn't work

here is my html Divs with the pics class are those sliding divs and the sub class divs are the little title divs at the bottom.

<div id="wrapper">
    <div class="pics" id="pic1"><div class="sub">cccc</div></div>
    <div class="pics" id="pic2"><div class="sub">mmm</div></div>
    <div class="pics" id="pic3"><div class="sub">mmmm</div></div>
    <div class="pics" id="pic4"><div class="sub">mmm</div></div>
    <br  class="clearfloat"/>
</div>

my jq function

<script language="javascript">

$(function(){

        $('.pics').mouseover(function(){


      /* firs resetting all the sub divs at
         the bottom to default (in case of Previous event) */

        $('.sub').hide();
        $('.sub').css('top','190px' );

               /*  resizing all the divs to 86px exept mouse overed one !*/

            $('.pics').not(this).stop(true).animate({width:"86"},500 )

               /*  setting $this div to 400px */
            $(this).animate({width:"400"},500 , function(){

                   /* sliding up little title div at the bottom */
            var sub_div = $(this).find('.sub' );
            sub_div.show();
            sub_div.animate({top:"-=20"},500);})
         })


})
</script>

my other problem is this little title divs are appearing at the outside of their parent div i want them to appear when thy get insde of their parrend div area i did set their parrent div over flow to hidden but i geusse that doesnt work with absolut posation

here is my css

/* slides parent div */
.container .header .top_pics {
    background-color: #F5D80A;
    position: relative;
    padding-bottom: 30px;
    padding-left: 20px;
    float: left;
    width: 680px;
}

/* sliding pictures (or divs) */
.container .header .top_pics .pics {
    width: 86px;
    float: left;
    height: 200px;
    overflow: hidden;

}
/* little slide up titles  */
.header .top_pics .sub  {
    background-color: #CCC;
    position: absolute;
    width: 395px;
    top: 200px;
    opacity : 5.0;
    display: none;
    padding-left: 5px;
    padding-top: 9px;
    padding-bottom: 9px;
}

/* each sliding pic*/
.header #pic1 {
    width: 400px;
    background-image: url(images/h1.jpg);
    background-repeat: no-repeat;
}
.header #pic2 {
    background-color: #0C9;
}

.header #pic3 {
    background-color: #C30;
}

.header #pic4 {
    background-color: #CCC;
}

Upvotes: 1

Views: 298

Answers (1)

Aaron
Aaron

Reputation: 5247

The problem is the relative animation of the top property (-=20). Try changing that to the actual fixed pixel value to which you want to animate this property, e.g: if they start with top: 190px, try changing your animate function to sub_div.animate({top:'170px'},500);}).

Upvotes: 1

Related Questions