目录
下拉菜单案例
效果图:
源代码:
鼠标进入事件mouseenter 鼠标离开事件mouseleave
下拉动画slideDown /slideUp
.stop() 停止动画
<script>
$(function(){
var $li=$(".wrap>ul>li")
$li.mouseenter(function () {
$(this).children("ul").stop().slideDown();
})
$li.mouseleave(function () {
$(this).children("ul").stop().slideUp();
})
});
</script>
突出展示案例
效果图:
源代码:
兄弟标签 $( ).siblings( )
<script>
$(function () {
$(".wrap>ul>li").mouseenter(function () {
//给li注册鼠标进入事件,让li都变亮
//让li的所有兄弟透明度降低
$(this).css("opacity","1").siblings().css("opacity",".4");
});
$(".wrap").mouseleave(function () {
//离开父盒子时,所有li亮起来
//$(this).children().children("li");
$(this).find('li').css("opacity", 1);
});
});
</script>
淘宝精品案例
效果图:

源代码:
获取索引用 .index();
筛选选择器 $().eq(i);
<script>
$(function () {
$("#left>li").mouseenter(function () {
var index=$(this).index();
$("#center>li").eq(index).show().siblings().hide();
});
$("#right>li").mouseenter(function () {
var index=$(this).index()+9;
$("#center>li").eq(index).show().siblings().hide();
});
});
</script>
京东呼吸灯案例
效果图:点击 切换图片