1

JSFiddlesを作成しました。

クリックするとアニメーションが作成されるため、繰り返しクリックを削除したいと思います。

これでうまくいくことがわかり$(this).off('click');ました。でも、

問題が発生するのは.on()、新しいリストアイテムがクリックされた後にクリックを有効にする方法です。

また.one()、良い解決策のようです。ただし、同じ意味論を維持しながらこれを使用する方法がわかりません。ありがとうございました。

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>

ここに画像の説明を入力

4

2 に答える 2

1

私はあなたのフィドルをフォークしました: http://jsfiddle.net/5A6Xn/

on() と off() を組み合わせて使用​​すると、クラス属性を変更して結果を得ることができます。

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

 bindClick();

 function bindClick()
 {
     $(".carousel_item:not(.selected)").on("click", function(event)
     {
         $(".carousel_item").off("click");
         $('.carousel_item').removeClass("selected");    
         $(this).addClass("selected");
         $(sideitems).stop(true, true).animate({
             right: '4.5em'
         });
         $(sideitems).hide();

         fadeItem();

         bindClick();
     });
 }

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

     },
     mouseleave: function () {

     }
 });

 function fadeItem() {
     $('.side_ul li:hidden:first').fadeIn(fadeItem).animate({
         right: '-4.5em'
     }, 150, function () {});;
 }
于 2012-07-11T19:18:25.337 に答える
1

$(el).is(':animated')アニメーション化されている要素 ( ) を確認してから、次のようにクリックを削除してはどうでしょうか。

$(elementClickedOn).click(function(e) {e.preventDefault();});
于 2012-07-11T19:12:55.713 に答える