jquery在hover時show、hide增長speed形成快速移入移出的抖動問題

問題

在開發中常常有須要鼠標hover時對內容隱藏顯示的需求，經常使用的方式是經過jquery的hover事件，配合show/hide進行實現，具體代碼以下：
html:

<ul>
    <li>
        <p>標題1</p>
    </li>

    <li>
        <p>標題2</p>
    </li>
    <li>
        <p>標題3</p>
    </li>
</ul>

js:

$(function () {
    $('ul li').hover(function () {
        $(this).children().show()
    }, function () {
        $('p').hide()
    })
})

這樣實現起來是沒有問題的，可是過於生硬，只是經過 display: block|none 的方式進行隱藏顯示，毫無體驗可言，因此改進一下，js以下：

$(function () {
    $('ul li').hover(function () {
        $(this).children().show(500) // 增長speed 500ms
    }, function () {
        $('p').hide(300) //增長speed 300ms
    })
})

嗯嗯，能夠了，顯示的時候增長了動畫，再也不生硬，可是，問題來了，當鼠標快速的移入移出的時候，即便鼠標已經中止運動，可是動畫尚未中止，依然會按照鼠標移入移出的次數執行完成纔會中止，這略微有點尷尬，須要解決一下。

解決辦法

本來想到的是，既然移入移出有時間延遲，那能夠加個延時，在移入的時候判斷時候在執行，若是已經在執行動畫過程，那麼就不執行show，hide同理，可是失敗了。
那麼再看看其餘的吧，hover不行，那使用mouseenter/mouseout事件呢，然而，效果是同樣的。仔細想了下，應該是由於增長了speed以後，至關於每次移入移出，都把隱藏/顯示的動畫增長到了動畫的隊列中，因此當快速的進行時，即便鼠標中止了，可是隊列中的事件尚未執行完，因此依然會按照當前的次數繼續執行，直到完成爲止。
那麼既然這樣，jq必定有本身的方式處理吧，要否則不可能就這樣你們都忍受着或者都本身去想各類辦法解決，果真，又搜了一下，原來jq已經提供了stop方法。
stop這個方法的用途就是用於中止動畫或效果，在它們完成以前。它接受兩個參數：stopAll：規定是否應該清除動畫隊列。默認是 false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行；goToEnd：規定是否當即完成當前動畫，默認是 false。默認地，stop() 會清除在被選元素上指定的當前動畫。
修改js以下：

$(function () {
    $('ul li').hover(function () {
        $(this).children().stop(false, true).show(500)
    }, function () {
        $('p').stop(false, true).hide(300)
    })
})

嗯嗯，問題解決了，能夠愉快的進進出出了。
看來jq用的太少了，對api也不夠熟練啊，之後仍是增強一下吧，嘻嘻。