jquery hover最后解決 - 不再疑惑 - 例子在這里

1. hover具有動畫累計的bug, 可以使用 stop 或 filter(:not(:animated))來消除, 但是, 即使這樣, 當鼠標反復滑入或滑出的時候, 雖然沒有動畫累計的問題, 但是 下面的顯示div仍然會 一上一下的, 但是, 這個沒有什么影響. 因為, 很少會有這樣的人來進行這樣的操作的!

2. 在做hover的時候, 上面的觸發和下面的顯示div, 因為觸發顯示后, 鼠標要 "移出" 整個區域(包括觸發部分和下面的顯示區域), 才會隱藏下面的顯示區域 , 因此, 應該把 "觸發+顯示"作為 一個整體的 div來處理.

3. 做hover 划過 展開層的 動畫, 應該使用 SlideUp或者 slideDown (slideToggle), 而不要使用animate 來手動的操作height width, 因為這個heigth, width, position等的位置是 比較麻煩的, 並且有時候是在經常變化, 也是不精確的!

4. 今后, 凡是看到 "多個並列" 的內容的時候, 不管是div 還是 img等, 都最好 , 首先考慮的就是 使用 ul> li 等, 水平方向上的布局, 盡量的首先考慮 腳手架grid 和 table, 而不使用 float.

5. 要將ul和li看作是兩個不同的部分, 要把 ul 看作是跟div table 一樣的 容器, 不要忽略這個 ul, 在ul上可以有u很多 css和js操作的!

6. 要實現 hover 的效果, 關鍵是: slideDown(), slideDown的作用 是 "通過高度的變化(向下增大) 來顯示 隱藏的元素" 就是說, 如果原來的元素 是 "隱藏"的, 通過slideDown 是可以把 它顯示出來的! 但是 這個只限於針對 css為: display:none的 情況, 而不適合 css為 visibility: hidden的情況.
   

7. 注意 由**於ul是塊級 元素 **, 所以要給ul 或li設定 寬度! 否則就會在整個行的寬度內 起效果...

---

**今后編寫這種hover的時候 步驟是: 首先, 把要顯示的部分, 用 靜態的 方法把它呈現出來, 然后才用 js 對要 有動畫的 哪部分用 動畫顯示出來. **

非常重要的兩點! 是實現 hover的 關鍵點

1. toggle方法函數: 它有兩個方面的用法, 以前只是 提到了一個, 即: 一方面, toggle是在(當元素被多次 單擊的時候! )多個 事件函數間 輪詢, 遍歷, 調用形式是: toggle(f1, f2, f3, ...). 第二方面, 是toggle 是在 元素的 顯示/隱藏 之間 進行切換!(即在show/hide之間 切換, 同樣的切換還有: slideUp, slideDown, slideToggle. 而show, hide之間的切換就不用 在toggle后面寫 show/hide了, 直接是 toggle了 ).

2. 關於元素的顯示 和 隱藏效果的實現.
   在垂直方向上 的hover, 使用 slideup和 slidedown進行切換 這個是 好理解 的!
   **而在水平方向上, 要實現 div內容的 水平方向上的 左右滑動 效果的動畫, 這時, 只需要直接使用 show/hide 方法 就好了. 不需要 使用 animate("width": ...) show/hide([speed]) 就可以實現div在水平方向上的動畫! **

3. 關於show 和hide的深入理解!
   show和hide的顯示和隱藏, 可以是直接的, 生硬的方式;
   其實, show和hide還可以有動畫方式的執行, 即以時間, 或關鍵字("fast, slow,normal")等的顯示
   這兩種方式都是 必要的 , 有的時候 就要 show/hide的方式, 這時就不會出現閃爍/晃動的現象;
   而有時候, 又需要有動畫的形式.

---

對於多次使用的jquery對象變量, 可以將選擇器的結果用 $var_name來表示, 這時的 jquery對象變量, 就像 php變量一樣 使用方便!

javasript中的多選分支結構: 跟c語言中的switch分支結構一樣, 同樣是 switch...case..break; .default..., 注意default后面就沒有 break了, 因為default后面就沒有情況判斷了, 直接就結束了...

javascript中 其實也是支持 多行字符串的! 可以使用: 多行字符串 相加 +, 使用行尾反斜線, 使用字符串數組.join('')等方法, 通常使用的是 第二種, 反斜線法, 注意 反斜線后不能再有 空格, 因為這里實際上 對 "回車/換行等" 符號進行 轉義!

注意看問題的 靈活性和 一分為二! hover是 mouserover和 mouserout的結合體, 很多時候, 由於問題的復雜性, 可能再hover 中 不一定要同時把兩個 行為函數都寫上, 可能會讓 某一個行為函數為空! 或者 , 不要固執地認為, 總是 使用 hover, 有時候, 由於問題的復雜性, 可能 考慮移入 移出 的對象/范圍 是不同的! 所以 使用hover 可能就不合適, 那么就要針對 不同的對象, 分別寫 mouseover 和 mouserout 行為函數

<nav class="navbar navbar-default" > 
    <ul class="nav navbar-nav" style="margin-left:100px;">
        <li id="lii">
        <a href="#">list1</a>    // 這個時觸發 部分
        <table class="">         // 這個時顯示  部分
            <tr id="all_area">     // 為了方便布局, 用table 形成 水平方向上並列的 兩欄 結構
                <td > 
                    <ul class="list-group" id="ull">
                        <li class="list-group-item">listr11</li>
                        <li class="list-group-item">listr12</li>
                        <li class="list-group-item">listr13</li>
                        <li class="list-group-item">listr14</li>
                        <li class="list-group-item">listr15</li>
                    </ul>

                </td>
                <td style="border: 0px solid #2228f8; padding: 5px 0 0 30px;" id="content" valign="top">
                </td>
            </tr>
        </table>

        </li>
        <li><a href="#">list2</a></li>
        <li><a href="#">list3</a></li>
        <li><a href="#">list4</a></li>
    </ul>
</nav>


<script type="text/javascript" charset="utf-8">

// 這個是js的 多行字符串
var cont1=' <a href="#">cont1</a>\
          <a href="#">cont2</a>\
          <a href="#">cont3</a>\
          <a href="#">cont4</a> <br> <a href="#">cont01</a>\
          <a href="#">cont02</a>\
          <a href="#">cont03</a> ';


var cont2=' <a href="#">foo1</a> <a href="#">foo2</a> <a href="#">foo3</a> <a href="#">foo4</a> <br> <a href="#">foo01</a> <a href="#">foo02</a> <a href="#">foo03</a> ';

var cont3=' <p><a href="#">bar1</a>\
          <a href="#">bar2</a>\
          <a href="#">bar3</a>\
          <a href="#">bar4</a> </p><p> <a href="#">bar01</a>\
          <a href="#">bar02</a>\
          <a href="#">bar03</a> </p>';

$('#lii>a').click(function(){
        $('#lii>table').toggle();   // 這個就是 單擊"觸發"的時候, 切換顯示/隱藏 "顯示區"
        });

$('#ull li').each(function(index){

        var idx = index+1;

       $(this).hover(function(){  // 注意對象, 這里的hover 對象 只是針對 ul>li
                var $content = $('#content');
                switch(idx){
                case 1:
                console.log(cont1);
                $content.html(cont1);
                break;
                case 2:
                console.log(cont2);
                $content.html(cont2);
                break;
                case 3:
                console.log(cont3);
                $content.html(cont3);
                break;
                default:
                $content.html('content  content content'); // default后面不用 break;
                }

                $content.show();
        },

            function(){                //// 這里是重點, 也是所有的技巧! 使用 一個 "空的" function, 來對父元素tr#all_area的鼠標移出事件進行 "屏蔽"
                //$('#content').hide();     // 使得當鼠標移出"觸發區" 的時候, 右邊的 子級 菜單並不被 關閉!
            });


});
$('tr#all_area').hover(function(){},      // 注意這里的對象, 變了, 不再時ul>li, 而是整個tr區域了.

                                         // 同時, 注意, 移入時的函數代碼 又為空了.

function(){   
        
        $('#content').hide();
        });

--------------------------------------



</script>

再寫mouseover和mouseout的時候, 還要考慮 如果是 對父元素 進行 事件的 函數執行, 是會包含 並傳遞到 這個父元素所 包含的 所有子元素 的同樣事件的. 比如: 寫父元素的 mouseout事件時, 就包含了 其中包含的 子元素的 事件的 執行! 此時如果移出觸發元素, 右邊的顯示區域也就隱藏了. 而實際上這樣是不對的! 因此, 有時候, 還不能間單的寫 mouseover/mouseout, 還得要使用 hover, 並且利用子元素 的兩個 函數, 對 父元素的事件 進行 覆蓋!!! 使 父元素中的事件 對其中的某一個 子元素的 同一事件 被 屏蔽!!

總之, 就是一句話, 只要明確了 各個元素 之間的 顯示/隱藏, 觸發關系, 明確了show/hide/toggle/ slideup/slidedown/slidetoggle動畫, 和 hover/mouseover/mouseout事件等,, 就一定可以 根據要求來寫動畫的.

要 千萬 消除 一旦是 鼠標滑動, 鼠標移入移出, 就是hover 這個是非常 片面的, 也是 很危險的 "思維 死胡同" . 應該考慮 作用的對象(作用的范圍) 是否是 同一個, 如果是對同一個對象的移出/移入, 可以使用hover, 如果不是同一個對象, 就不能使用hover, 要分別寫mouseover和mouseout. 當然還要考慮 父子 元素之間的事件 的冒泡和包含關系!! 以及使用子元素 對 父元素 的事件 的屏蔽!