$(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>
$
的第二个参数代表范围,此处的意思就是查找#title li a
下的".out"
这个元素。
换种写法就是
$(this).find('.out').stop().animate({'top': '0px'},300);