hoverQueue.coffee

hoverQueue.coffee

#
# Usage
#
# **html**
# <a href="#" class="elem"> 
#   hoverTrigger
#   <div class="pop"> 
#     In the pop
#   </div>
# </a>
#
# **js**
# $(function(){
#   hoverTrigger(".elem", ".pop");
# });
#
# **coffee**
# $ ->
#   hoverTrigger ".elem", ".pop"
#
#
hoverTrigger = (elem,pop) ->
  queue = []  # ホバーアクションを追加するキュー
  
  # cssで指定していない場合
  # $(pop).css
  #   display: "none"

  hover_on = (t) ->
    $(t).find(pop).fadeTo(87, 1)
    return true

  hover_off = (t) ->
    stop()
    $(t).find(pop).fadeOut(87)
    return true

  $(elem).hover ->
    queue.push(hover_on)  # ホバー開始時にキューに追加

    setTimeout =>
      if queue.length > 0
        func = queue.shift()
        if typeof func is "function"
          func(@)
    , 370  # アクションを実行するまでの待機時間

  , ->
    if queue.length > 0
      queue.shift()  # ホバーが外れたらアクションをキャンセル
    else
      hover_off(@)