hover具有动画累计的bug, 可以使用 stop 或 filter(:not(:animated))来消除, 但是, 即使这样, 当鼠标反复滑入或滑出的时候, 虽然没有动画累计的问题, 但是 下面的显示div仍然会 一上一下的, 但是, 这个没有什么影响. 因为, 很少会有这样的人来进行这样的操作的!
在做hover的时候, 上面的触发和下面的显示div, 因为触发显示后, 鼠标要 "移出" 整个区域(包括触发部分和下面的显示区域), 才会隐藏下面的显示区域 , 因此, 应该把 "触发+显示"作为 一个整体的 div来处理.
做hover 划过 展开层的 动画, 应该使用 SlideUp或者 slideDown (slideToggle), 而不要使用animate 来手动的操作height width, 因为这个heigth, width, position等的位置是 比较麻烦的, 并且有时候是在经常变化, 也是不精确的!
今后, 凡是看到 "多个并列" 的内容的时候, 不管是div 还是 img等, 都最好 , 首先考虑的就是 使用 ul> li 等, 水平方向上的布局, 尽量的首先考虑 脚手架grid 和 table, 而不使用 float.
要将ul和li看作是两个不同的部分, 要把 ul 看作是跟div table 一样的 容器, 不要忽略这个 ul, 在ul上可以有u很多 css和js操作的!
要实现 hover 的效果, 关键是: slideDown(), slideDown的作用 是 "通过高度的变化(向下增大) 来显示 隐藏的元素" 就是说, 如果原来的元素 是 "隐藏"的, 通过slideDown 是可以把 它显示出来的! 但是 这个只限于针对 css为: display:none的 情况, 而不适合 css为 visibility: hidden的情况.
注意 由于ul是块级 元素 , 所以要给ul 或li设定 宽度! 否则就会在整个行的宽度内 起效果...
今后编写这种hover的时候 步骤是: 首先, 把要显示的部分, 用 静态的 方法把它呈现出来, 然后才用 js 对要 有动画的 哪部分用 动画显示出来.
非常重要的两点! 是实现 hover的 关键点
toggle方法函数: 它有两个方面的用法, 以前只是 提到了一个, 即: 一方面, toggle是在(当元素被多次 单击的时候! )多个 事件函数间 轮询, 遍历, 调用形式是: toggle(f1, f2, f3, ...). 第二方面, 是toggle 是在 元素的 显示/隐藏 之间 进行切换!(即在show/hide之间 切换, 同样的切换还有: slideUp, slideDown, slideToggle. 而show, hide之间的切换就不用 在toggle后面写 show/hide了, 直接是 toggle了 ).
关于元素的显示 和 隐藏效果的实现.
在垂直方向上 的hover, 使用 slideup和 slidedown进行切换 这个是 好理解 的!
而在水平方向上, 要实现 div内容的 水平方向上的 左右滑动 效果的动画, 这时, 只需要直接使用 show/hide 方法 就好了. 不需要 使用 animate("width": ...) show/hide([speed]) 就可以实现div在水平方向上的动画!关于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>