關閉鼠標停止/反向動畫（baraja jquery插件）

Question

我已經實現了我需要創建的'web app'部分的baraja jquery插件。

我選擇改變腳本並在懸停時分散卡片，而不是通過點擊按鈕來傳播卡片的插件。從表面上看，這種方法很有效，但如果將鼠標懸停在卡片上並在動畫完成之前快速退出，卡片將保持打開狀態。然後當你將鼠標懸停在「甲板」上時，它們就會關閉。我已經創建了一個codepen顯示此：

http://codepen.io/moy/pen/OPyGgw

我一直在使用.stop();嘗試，但它似乎並沒有對結果產生影響。誰能幫我這個？

另外我希望甲板在頁面加載時打開，然後在一秒鐘或2秒後關閉。我試圖用$(document).ready()包括baraja.fan調用，但沒有觸發它 - 任何想法？

Answer 1

這個真的讓我感到癢癢;）嘗試了幾件事情，但是 - 正如已經告訴過的 - 插件不希望更快地獲得密切的動畫調用，那麼開場動畫將運行。

所以最後我建立你以下。 - 在文檔準備就緒時打開風扇 - 在關閉它之前爲mouseleave創建超時，等待打開動畫的持續時間 - 當鼠標移開元素時，您將有400ms的延遲，但即使在您去過快...

$(document).ready(function() { 

    if ($("#baraja-el").length) { 
     var $el = $('#baraja-el'); 
     baraja = $el.baraja(); 
    } 

    //initial open 
    baraja.fan({ 
      speed: 400, 
      easing: 'ease-in-out', 
      range: 80, 
      direction: 'right', 
      origin: { 
       x: 0, 
       y: 0 
      }, 
      center: true 
     }); 

    $('.baraja-container').addClass('open'); 

    // navigation 
    $('#baraja-prev').on('click', function (event) { 
     baraja.previous(); 
     $('.baraja-container li').each(function() { 
      if ($(this).css('z-index') === "1000") { 
       $(this).addClass('visited'); 
      } 
     }); 
    }); 

    $('#baraja-next').on('click', function (event) { 
     baraja.next(); 
     $('.baraja-container li').each(function() { 
      if ($(this).css('z-index') === "1010") { 
       $(this).addClass('visited'); 
      } 
     }); 
    }); 

    $('.baraja-container').hover(function (event) { 
     if(!$(this).hasClass('open')) 
     { 
      $(this).addClass('open'); 
      baraja.fan({ 
      speed: 400, 
      easing: 'ease-in-out', 
      range: 80, 
      direction: 'right', 
      origin: { 
       x: 0, 
       y: 0 
      }, 
      center: true 
     }); 
     } 

    }, function (event) { 
    curBarCon = $(this); 
    setTimeout(function(){ 
      curBarCon.removeClass('open'); 
      baraja.close(); 
}, 400); 

    }); 

    $('.baraja-container li').click(function() { 
     $(this).addClass('visited'); 
    }); 

}); 

，因爲我在你codepen撥弄，你應該在這裏工作的版本：http://codepen.io/moy/pen/OPyGgw 但是......它真的沒有完美的解決方案。我建議獲得另一個插件或返工baraja來獲得回調函數，這將測試動畫是否正在運行並在需要時將它們出隊。

rgrds， ē