How do I unbind and rebind on() click animations?

Question

I have a recursive loop that does a simple animation. These animations are controlled by on page load & onclick of controls .carousel_item.

LIVE SAMPLE JSFIDDLES CLICK HERE stripped down for simplicity purposes

Problem: When Repeat clicking on the same control the animation will fire over and over. I would like the animation to only fire once per carousel_item.

UPDATEI would like the animation to only fire once per carousel_item. And reset when the following carousel_item is clicked.

EXAMPLE: Pushing 1 repeatedly will trigger the animation over and over again. I would like the first press to trigger the animation once. Next User mashes 2 this will retrigger the animation once and not repeatedly. User can still push 1 again for the mashing is all I want to prevent

Logically, I see the click unbinding itself and rebinding itself on click of another .carousel_item that's my logic; however, I'm sure there's a better solution

var carItems = $('.carousel_item');
var sideitems = $('.side_item');
var x = false;
$(sideitems).hide();
fadeItem();

$(carItems).on({
    click: function () {

        $(sideitems).stop(true, true).animate({
            right: '4.5em'
        });
        $(sideitems).hide();

        fadeItem();

    },
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});


function fadeItem() {
    $('.side_ul li:hidden:first').fadeIn(fadeItem).animate({
        right: '-4.5em'
    }, 150, function () {});;
}

HTML

<div id="carousel" class="flexslider">
      <ul class="slides">
        <li class="carousel_item"> <img src="asset/img/1600/slide1_1600.jpg" /> </li>
        <li class="carousel_item"> <img src="asset/img/1600/slide2_1600.jpg" /> </li>
        <li class="carousel_item"> <img src="asset/img/1600/slide1_1600.jpg" /> </li>
        <li class="carousel_item"> <img src="asset/img/1600/slide2_1600.jpg" /> </li>
        <!-- items mirrored twice, total of 12 -->
      </ul>
    </div>

      <nav class="side_nav">
    <ul class="side_ul">
        <li class="side_item home"><div class="text_links"><a href="#">home</a></div></li>
        <li class="side_item document"><div class="text_links"><a href="#">docs</a></div></li>
        <li class="side_item video"><div class="text_links"><a href="#">video</a></div></li>        
        <li class="side_item programming"><div class="text_links"><a href="#">web</a></div></li>

    </ul>
  </nav>

enter image description here LIVE SAMPLE JSFIDDLES CLICK HERE

score 3 · Accepted Answer · edited May 23 '17 at 12:19

3

Working Demo http://jsfiddle.net/ScbDG/2/

You can use .off after click event; http://api.jquery.com/off/ & $(this) will make sure that its set to off for that particular object.

Good read: Best way to remove an event handler in jQuery?

Hope this helps, :)

code

$(carItems).on({
     click: function () {

         $(sideitems).stop(true, true).animate({
             right: '4.5em'
         });
         $(sideitems).hide();

         fadeItem();
         $(this).off('click');

     },
     mouseenter: function () {

     },
     mouseleave: function () {

     }



 });

edited May 23 '17 at 12:19

Community

1
1

answered Jul 10 '12 at 03:21

Tats_innit

33,991
10
71
77

1

maybe one() is appropriate here? – akonsu Jul 10 '12 at 03:27
@akonsu I thought about it but might be mathew (OP) needs **late binding** after turning it `off`, .one will make it only one time clickable `:)` although good idea, OP might want to **read this in that case:** http://api.jquery.com/one/ **+1** to your comment man! – Tats_innit Jul 10 '12 at 03:28
@Tats_innit maybe I am missing something but your code is also one time clickable because you remove the click handler at the end. – akonsu Jul 10 '12 at 03:31
@akonsu howz it going man! With jQuery 1.7 onward the event API has been updated, .bind()/.unbind() are still available for backwards compatibility, but the preferred method is using the on()/off() functions. `:)` but still can be bind back again, lemme know if I missed anything or not clear `:)` using `.off` on the `$(this)` carousel will achieve that and unbind the event we can bind it back again though depending the cause – Tats_innit Jul 10 '12 at 03:33
1

Also one() would not work with this pretty syntax :) but it does otherwise do the same. – Mahn Jul 10 '12 at 03:33
@Mahn Indeed I concur bruv `:)` depending on OP need [ Bizinga ] x 2 times `:)` – Tats_innit Jul 10 '12 at 03:35
@Tats_innit how would get the toggle of "on/off"? I must turn them back on? to reuse them just the same one cant be pressed more then once – Armeen Moon Jul 10 '12 at 05:23
I essentially want to prevent users from mashing the sames .carosole_item and making the animation reset over and over. I need the flow of the orginal jsfiddles. – Armeen Moon Jul 10 '12 at 05:30

How do I unbind and rebind on() click animations?

1 Answers1