ドロップダウンに一手間加えて美味しく

普通にボタンかなんかポチったらドロップダウンが出る何一つとして面白みも新鮮さもないヤツなんですが
hover時にちょっと一手間加える時があったのでなんとなくコンテンツにしてみました。
今回の要望

1. ボタン or aタグクリックでドロップダウン。開いたり閉じたりを繰り返す。
2. hoverした時に（ボタンが）開きそうな感じにして欲しい

hoverした時に（ボタンが）開きそうな感じにして欲しいってなんやねんって事ですが
ほんの少しぬるっと出るようにアニメーションしてくれって事らしいです。へぇ
アニメーションCSSでやろうかとも思いましたが、その後のクリックでドロップダウンの処理が控えているので hoverのやつもJSでやったろうって事になりました。

そこそこ長いですが、実行したJSは以下となります。

javascript

$(function(){
  var overFlg = 0, // dd動作の制御フラグ
      ddTriggerElem = $('.ddTrigger'), // ddトリガー要素
      ddContentsElem = $('.ddContents'); // dd要素

  //-----------------------------------------------
  // オープントリガーのmouseover処理
  // ドロップダウンが開いている場合は動作させない
  // ボタン無いの矢印背景と、ちょいでる要素を下げる
  //-----------------------------------------------
  ddTriggerElem.on('mouseover',function()
  {
    if(ddTriggerElem.hasClass('openElem')) return false;
    $(this).children('i').velocity('stop');
    $(this).next('.hoverOpen').velocity('stop');
    $(this).children('i').velocity({"top":"32px"},300,"");
    $(this).next('.hoverOpen').velocity({"bottom":"-10px"},300,"");
  });

  //-----------------------------------------------
  // オープントリガーのmouseout処理
  // ボタン無いの矢印背景と、ちょいでる要素を上げる(元に戻す)
  //-----------------------------------------------
  ddTriggerElem.on('mouseout',function()
  {
    var topPx = 22;
    if(ddTriggerElem.hasClass('openElem')){
      topPx = 16;
    }
      
    $(this).children('i').velocity('stop');
    $(this).next('.hoverOpen').velocity('stop');
    $(this).children('i').velocity({"top":topPx+"px"},300,"");
    $(this).next('.hoverOpen').velocity({"bottom":"0px"},300,"");
  });

  //-----------------------------------------------
  // オープントリガーのclick処理
  // ドロップダウンの表示非表示
  //-----------------------------------------------
  ddTriggerElem.on('click',function()
  {
    if(overFlg == 1) return false; // 動作中の場合は止める
    overFlg = 1;
    if(ddContentsElem.css('display') == 'none')
    {
      // open処理
      ddTriggerElem.addClass('openElem');

      // mouseoutを動作させて矢印やらを元に戻す
      ddTriggerElem.trigger('mouseout');
      ddContentsElem.slideDown('300', function() {
        // フラグリセット
        overFlg = 0;
      });
    }
    else
    {
      // close処理
      ddTriggerElem.removeClass('openElem');
      ddTriggerElem.trigger('mouseout');
      ddContentsElem.slideUp('300', function() 
      {
        // フラグリセット
        overFlg = 0;
      });
    }
  });
});