2012-03-04 10 views
0

jQueryでカルーセル型のアニメーションをプログラミングするという奇妙な問題があります。私はあなたがリンクをクリックすると、divをアニメーション化するようにします。アニメーション中にリンクをクリックできないようにするために、私はリンクがアニメーションにバインドするバインド条件を設定しましたが、アニメーション中はアンバインドされてから最後にバインドされます。最高のフィドルは:http://jsfiddle.net/aRrmD/1/を示しています。jqueryの関数からアンバインドされたときにfalseを返します。

これはすべてFiddlrでうまく機能します。しかし、実際のWebページに挿入すると、すぐにリンクを2回クリックするとうまくいきません。最初のクリックでアニメーションがトリガーされますが、リンクがバインドされていないため2回目のクリックでページがリロードされますアニメーション中のアニメーション機能です。そのため、リンクのデフォルト動作が開始され、アニメーションが完了してその機能が再びバインドされるまで標準リンクになります。したがって、リンクをダブルクリックすると、2回目のクリックでページがリロードされます。なぜFiddlrでこれをやっていないのか分かりませんが、それはイベントがそのシステムでどのように動作してスタンドアローンのページと異なるのかとは関係があります。

私ができるようにしたいのは、リンクがバインドされていない(つまり、アニメーション中に)リンクがデフォルトのデフォルトの動作をしないようにすることです。私はアンカーをアンカーではなく、これを回避することができることを知っていますが、これは残念ながら私にそれを支配しない広いシステムの一部です。任意のポインタの人々のための

おかげで...

答えて

0
あなたはアニメーションのアンバインドと結合イベントハンドラの代わりに進行中であるかどうかをテストすることができ

function moveNext(e) { 
    e.preventDefault(); 
    var $carousel = $('.carousel'); 
    if(!$carousel.is(':animated')) { 
     $carousel.animate({ 
      marginLeft: '-=' + widthOfItem 
     }, 500) 
    } 
} 

参考::animated


実際にイベントハンドラのバインドを解除してバインドする場合は、他のイベントハンドラを追加して、

$('.btn-next').bind('click', false); // will always prevent the default action 
$('.btn-next').bind('click', moveNext); 

.bindからfalsefunction() { return false;)を渡すのと同じである渡す:これは、常にデフォルトのアクションを防ぐことができます。これにより、デフォルトのアクションのイベントがバブリングするのを防ぐことができます。しかし、単に代わりにfunction(e) { e.preventDefault(); }を渡すことができます。

その後、代わりにアンバインドすべてイベントハンドラの、あなただけのmoveNextをアンバインド:

$('.btn-next').unbind(moveNext); 

あなたはしかし$('.btn-next')への参照をキャッシュまたは$(this)を使用する必要があります。

+1

また、イベントハンドラのバインド/バインド解除よりも高速です – pomeh

+0

ありがとうございました - 私は 'アニメーション'擬似セレクタについて知りませんでした。これがパフォーマンス面でどのようになるか知っていますか?最終的には、「カルーセル」要素内にかなり大きなDOMツリーが存在する可能性があるため、できるだけ効率的になるようにしようとしています。 – Dan

+0

@ダン:どのように ':animated'が動作するのか分かりませんが、どのような場合でもパフォーマンスをテストする必要があります。バインドを解除しバインドする代わりにステータスを示すフラグを使用することもできます。多くの方法があります。 –

関連する問題