Javascript 如何取消绑定并重新绑定（）单击动画？

我有一个做简单动画的递归循环。这些动画由页面加载和单击控件

.carousel\u item

控制

为了简单起见，将其精简

问题：当重复单击同一控件时，动画将反复播放。我希望动画每个

旋转木马项目只发射一次

更新我希望每个

旋转木马项目只触发一次动画

。并在单击以下

carousel_项目时重置

示例：反复按1将反复触发动画。我想第一次按下触发动画一次。下一个用户mashes2这将重新触发动画一次，而不是重复。用户仍然可以再次推1，因为我只想防止混搭

从逻辑上讲，我看到单击另一个
。carousel_项目时，会自动解除绑定和重新绑定，这是我的逻辑；不过，我相信有更好的解决办法

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>
















工作演示

您可以在单击事件后使用
.off
$（此）
将确保针对特定对象将其设置为
off

好书：

希望这有帮助，
：）

代码

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

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

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

     },
     mouseenter: function () {

     },
     mouseleave: function () {

     }



 });

也许一个（）在这里是合适的？@akonsu我想了一下，但可能是mathew（OP）在关闭
后需要延迟绑定。一个将使它只可单击一次
：）
虽然这是个好主意，OP可能想在这种情况下阅读此内容：+1给你的评论人@Tats_innit可能我遗漏了一些东西，但您的代码也可以一次性单击，因为您在最后删除了单击处理程序。@akonsu howz，伙计！对于jQuery 1.7以后的版本，事件API已经更新，.bind（）/.unbind（）仍然可以向后兼容，但是首选的方法是使用on（）/off（）函数
：）
但是仍然可以重新绑定，让我知道如果我错过了任何东西或者不清楚
：）
使用
$（这）
旋转木马将实现这一点，并解除绑定事件，我们可以重新绑定它，尽管这取决于原因，所以one（）不能使用这个漂亮的语法：）但是它也会这样做。