2012-05-10 20 views
0

私はjQueryに少し新しく、このインスタンスではキューの設定に問題があります。Jquery無限キュー

私はこれをやろうとしています。マウスオーバーすると、最初のキューエントリがトリガーされます。次には、別のマウスオーバーが次のキューエントリを開始するまでを待ちます。キューを無期限に循環させます。

$("#header").mouseover(function() { 
    var $shineCopy = $("#shine111").clone(); 
    $shineCopy.appendTo('body').animate({ 
     width: "300px", 
     height: "300px", 
     opacity: 0, 
     "left": 0, 
     "top": 100 
    }, 1000, function() { 
     $(this).remove(); 
    }); 
    $shineCopy.appendTo('body').rotate({animateTo:180}) 
}); 
​ 
$("#header").mouseover(function() { 
    var $shineCopy = $("#shine222").clone(); 
    $shineCopy.appendTo('body').animate({ 
     width: "300px", 
     height: "300px", 
     opacity: 0, 
     "left": 0, 
     "top": 200 
    }, 1000, function() { 
     $(this).remove(); 
    }); 
    $shineCopy.appendTo('body').rotate({animateTo:180}) 
}); 

$("#header").mouseover(function() { 
    var $shineCopy = $("#shine222").clone(); 
    $shineCopy.appendTo('body').animate({ 
     width: "300px", 
     height: "300px", 
     opacity: 0, 
     "left": 0, 
     "top": 300 
    }, 1000, function() { 
     $(this).remove(); 
    }); 
    $shineCopy.appendTo('body').rotate({animateTo:180}) 
}); 
+3

助けが必要なことを明確にすることはできますか? – iambriansreed

+1

あなたは3つのイベントハンドラをバインドしているだけで、それらはすべて同時に実行されます...連続したイベントで動作を変更したい場合は、このプラグインを見てみてください。https:// github .com/fkling/jQuery-Function-Toggle-Plugin –

+0

フェリックス、これはとてもエレガントで美しいです。ありがとう! – nuclearsugar

答えて

0

http://jsfiddle.net/fChDX/

は、別々に定義された3つの機能を持っているページレベルで定義されたJavaScriptカウンタ変数を持っており、あなたのmouseoverイベントカウンタ二変数を更新し、それに基づいて呼び出すように機能するかを決めるの両方を持っています。前の関数が実行されている間に次の関数を起動しないようにするには、start関数でtrueに設定された2回目の "isrunning" varを、remove関数でfalseにします。何も必要ありません。

関連する問題