2

簡単なアニメーションを行う再帰ループがあります。これらのアニメーションは、ページの読み込み時とコントロールの onclick によって制御されます.carousel_item。

LIVE SAMPLE JSFIDDLES ここをクリック

問題: 同じコントロールを繰り返しクリックすると、アニメーションが何度も発生します。アニメーションが ごとに 1 回だけ起動するようにしcarousel_itemます。

更新アニメーションをcarousel_item. carousel_itemそして以下をクリックするとリセットされます。

例: 1 を繰り返し押すと、アニメーションが何度もトリガーされます。最初のプレスでアニメーションを1回トリガーしたいと思います。Next User mashes 2 これにより、アニメーションが 1 回再トリガーされ、繰り返しは発生しません。ユーザーは、マッシングだけを防止したいので、もう一度 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 に答える