$(document).ready(function(e) {
$("#title li a").wrapInner( '<span class="out"></span>' );
$("#title li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#title li a").hover(function() {
`$(".out", this).stop().`animate({'top': '40px'}, 300); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 300); // move down - show
}, function() {
$(".out", this).stop().animate({'top': '0px'}, 300); // move up - show
$(".over", this).stop().animate({'top': '-40px'}, 300); // move up - hide
});
});
</script>
</head>
<body>
<div id="title" class="menu">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">阳光服务</a></li>
<li><a href="#">加盟代理</a></li>
<li><a href="#">在线咨询</a></li>
</ul>
<div class="cls"></div>
$(this).find('.out').stop().animate({'top': '0px'},300);
就是在当前dom下找.out元素,stop()就是清除当前动画,防止动画循环执行
我去,这个问题我记得回答过一次啊。。
$
的第二个参数代表范围,此处的意思就是查找#title li a
下的".out"
这个元素。
$(this).find('.out').stop().animate({'top': '0px'},300);
哦看到了,这次多问题了stop
的问题。
这个是为了防止动画没有结束又再次触发。stop
是先停止动画。
相当于this.find('.out')
,stop是停止jquery动画