jQuery unbind button while .animate() is running

Question

I'm trying make a button unusable while animate running. I coded a simple scroll with the button but if a user clicks the button repeatedly, the animation doesn't stop so scrolling will repeat over and over. I tried using unbind on the element when clicked and bind again when the animtation had finished but it doesn't appear to work. Here is my code:

$(".go_up").bind('click',function(){
    var $this = $(this);
    var $content_page = $this.siblings('.componentin').children('.item-page');
    var $content_math = $content_page.height();
    var $content_height = ($content_math)*(-1);
    var $content_margin = $content_page.css("margin-top");

    if (($content_margin) <= '0') {
        $this.unbind("click");
        $content_page.animate({ marginTop: "+=100px" }, "slow", function(){
            $this.bind("click");
        });
    }
});

And here is the example: www.erincfirtina.com/bar/

[FIXED]

$(".go_up").bind('click',function(){
                  var $this = $(this);
                  var $content_page = $this.siblings('.componentin').children('.item-page');
                  var $content_math = $content_page.height();
                  var $content_height = ($content_math)*(-1);
                  var $content_margin = $content_page.css("margin-top");
                  if ((($content_margin) <= '0') && (!$content_page.is(":animated"))){
                  $content_page.animate({marginTop: "+=100px"}, "slow");
                  }
              });

added .is(":animated") and works smoothly

May be duplaicate http://stackoverflow.com/questions/2593195/how-do-i-rebind-the-click-event-after-unbindclick — Yoann, Nov 18 '11 at 10:02
Thanks. It works! I added ".is(":animated")" to if clause and it fixed. — Erinç Fırtına, Nov 18 '11 at 10:28

score 0 · Answer 1 · answered Nov 18 '11 at 09:57

0

Try this:

//replace this: $this.bind("click");

with this:
$this.unbind('toggle').unbind('click');

Hope it helps

answered Nov 18 '11 at 09:57

Sudhir Bastakoti

99,167
15
158
162

doesn't work. When clicked the element first time, code works but then button doesn't work. I think it stucked as unbind. – Erinç Fırtına Nov 18 '11 at 10:16

idanzalz · Answer 2 · 2011-11-18T10:21:44.257

0

Your second bind call doesn't give the function to call, so that is one problem

BTW, there is a great plugin for what you are trying to do called accordion, it is in the jquery ui library which is also very useful. The cool thing is that also makes sure only one tab is open at all times (like the example you gave)

edited Nov 18 '11 at 10:21

answered Nov 18 '11 at 10:16

idanzalz

1,740
1
11
18

I'm using that for menu. The topic is scrolling the content with buttons. – Erinç Fırtına Nov 18 '11 at 10:32

jQuery unbind button while .animate() is running

2 Answers2