0

In a div i am putting some divs and i set overflow: hidden. Main div can show five sub divs after that i need to scroll to see rest of the divs. To scroll down i created a div and on click function of that div i am scrolling rest of div. Code for this is following:

 if(whatsupobj.length > 5){ 
    $('#scrolldown').click(function(){
        var toppx = whatsupobj.length-1;
        var lastdivtoppx = '268px';                                     
        if($('#subdiv'+toppx).css('top') !== lastdivtoppx ){
            $(".subdiv").animate({"top": "-=67px"}, "medium");
        }
    });

    $('#scrollup').click(function(){
        if($('#subdiv0').css('top') !== '0px' ){
            $(".subdiv").animate({"top": "+=67px"}, "medium");
        }
    }); 
}else{  
    $('#scrollup').unbind("click");
    $('#scrolldown').unbind("click");
}

its working fine with only one problem. Problem is that when i click on scrolldown very fast then sub divs keep going down. But when i click on scrolldown normally then it stops when last div shows itself. I know i can increase or decrease the animation speed but it doesn't look good when its fast. How can i fix this problem? Thanks in advance.

Piscean
  • 3,069
  • 12
  • 47
  • 96
  • I just find out this link. It solved my problem http://stackoverflow.com/questions/5380722/disable-a-link-temporarily-when-clicked – Piscean Dec 14 '11 at 12:50

1 Answers1

1

As far as I can tell the problem your having is probably with this .animate({"top": "+=67px"} piece of code.

You should add a .stop() so it stops when you click again and does'nt just keep on going, like so: $(".subdiv").stop().animate({"top": "+=67px"}, "medium");

Now your problem will be that your adding and subtracting to the original value, and unless the animation is completed your values will be all messed up.

The best solution would be not to add and subtract when doing these kinds of animations, and preferrably getting your css values from the elements themselves or at least setting the css values explicitly, like so : animate({"top": "67px"}, but then you would have to construct a way of finding the right values for each subsequent click.

Second option would be to set the stop() to automaticly go to the end of the animation, this will make your animations skip a little if the handler is clicked repeatedly, but is the easiest way of solving your problem, and would look like this:

$(".subdiv").stop(true, true).animate({"top": "+=67px"}, "medium");

adeneo
  • 312,895
  • 29
  • 395
  • 388