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等的位置是 比较麻烦的, 并且有时候是在经常变化, 也是不精确的!

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后面就没有情况判断了, 直接就结束了...

hover是 mouserover和 mouserout的结合体, 很多时候, 由于问题的复杂性, 可能再hover 中 不一定要同时把两个 行为函数都写上, 可能会让 某一个行为函数为空! 或者 , 不要固执地认为, 总是 使用 hover, 有时候, 由于问题的复杂性, 可能 考虑移入 移出 的对象/范围 是不同的! 所以 使用hover 可能就不合适, 那么就要针对 不同的对象, 分别写 mouseover 和 mouserout 行为函数

<nav class="navbar navbar-default" > 
    <ul class="nav navbar-nav" style="margin-left:100px;">
        <li >
        <a href="#">list1</a>    // 这个时触发 部分
        <table class="">         // 这个时显示  部分
            <tr >     // 为了方便布局, 用table 形成 水平方向上并列的 两栏 结构
                <td > 
                    <ul class="list-group" >
                        <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;" >
                </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事件等,, 就一定可以 根据要求来写动画的.