2

我有一个执行简单动画的递归循环。这些动画由 on page load & onclick of controls 控制.carousel_item。

现场样品 JSFIDDLES 单击此处 为简单起见而精简

问题： 当重复点击同一个控件时，动画会一遍又一遍地触发。我希望动画每次只触发一次carousel_item。

更新我希望动画每次只触发一次carousel_item。并在单击以下内容时重置carousel_item。

示例：反复按 1 将反复触发动画。我希望第一次按下触发动画一次。Next User mashes 2 这将重新触发动画一次而不是重复。用户仍然可以再次按下 1，因为我只想防止糖化

从逻辑上讲，我看到单击解除绑定本身并在单击另一个时重新绑定，.carousel_item 这是我的逻辑；但是，我确信有更好的解决方案

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>

在此处输入图像描述 现场样品 JSFIDDLES 点击这里

4

1 回答 1

3

工作演示 http://jsfiddle.net/ScbDG/2/

您可以.off在点击事件后使用；http://api.jquery.com/off/ &$(this)将确保将其设置off为该特定对象。

好读：在 jQuery 中删除事件处理程序的最佳方法？

希望这可以帮助，:)

代码

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

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

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

     },
     mouseenter: function () {

     },
     mouseleave: function () {

     }



 });
于 2012-07-10T03:21:25.847 回答