jQuery的hover事件，选择器造成的动画不能实现
如下这段包含jQuery代码第二十三行中，为何hover的选择器写成$('.test')或者$('.testli')动画均可实现，写成$('.testlia')就不行？跟...
如下这段包含jQuery代码第二十三行中，为何hover的选择器写成$('.test')或者$('.test li')动画均可实现，写成$('.test li a')就不行？ 跟hover事件有关系吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans-CN">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>测试</title>
<style type="text/css">
.test{margin-left: 100px}
.test li{margin-left: 20px;width: 100px;height: 100px;list-style: none;}
.test li a{width: 100%;height: 100%;display: block;}
.item1{background-color: #f0000f}
.item2{background-color: #ccc000}
.item3{background-color: #fff000}
.item4{background-color: #0f0000}
/*.item1{background-color: #fffff0}*/
.hover{background-color: #ccc!important}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var index = 0;
var adTimer = null;
//循环动画
$('.test li').hover(function(){
//此处写成$('.test')或者$('.test li')动画均可实现，写成$('.test li a')就不行
if(adTimer){
clearInterval(adTimer);
}
},function(){
adTimer = setInterval(function(){
$('.test li a').eq(index).addClass('hover').siblings().removeClass('hover');
index++;
if(index==4){index=0;}
} , 1000);
}).trigger("mouseleave");
})
</script>
</head>
<body>
<div class="test">
<ul>
<li>
<a href="#" class="item1">第一个</a>
<a href="#" class="item2">第二个</a>
<a href="#" class="item3">第三个</a>
<a href="#" class="item4">第四个</a>
</li>
</ul>
</div>
</body>
</html>
.trigger("mouseleave");这句链式操作单独拿出来，写成
$('.test li').trigger("mouseleave");也不能实现 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans-CN">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>测试</title>
<style type="text/css">
.test{margin-left: 100px}
.test li{margin-left: 20px;width: 100px;height: 100px;list-style: none;}
.test li a{width: 100%;height: 100%;display: block;}
.item1{background-color: #f0000f}
.item2{background-color: #ccc000}
.item3{background-color: #fff000}
.item4{background-color: #0f0000}
/*.item1{background-color: #fffff0}*/
.hover{background-color: #ccc!important}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var index = 0;
var adTimer = null;
//循环动画
$('.test li').hover(function(){
//此处写成$('.test')或者$('.test li')动画均可实现，写成$('.test li a')就不行
if(adTimer){
clearInterval(adTimer);
}
},function(){
adTimer = setInterval(function(){
$('.test li a').eq(index).addClass('hover').siblings().removeClass('hover');
index++;
if(index==4){index=0;}
} , 1000);
}).trigger("mouseleave");
})
</script>
</head>
<body>
<div class="test">
<ul>
<li>
<a href="#" class="item1">第一个</a>
<a href="#" class="item2">第二个</a>
<a href="#" class="item3">第三个</a>
<a href="#" class="item4">第四个</a>
</li>
</ul>
</div>
</body>
</html>
.trigger("mouseleave");这句链式操作单独拿出来，写成
$('.test li').trigger("mouseleave");也不能实现 展开
展开全部
$('.test li').each(function(){
$(this)....你的代码
});
$(this)....你的代码
});
追问
我上面说了，用$('.test li')的话效果是没问题的。我问的是为什么$('.test li a')不行？
追答
选择器问题吧？查查API吧
或者试试$(.test li).find("a")
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
问题是效果实现不正常？
追问
如果$('.test li')改为$('.test li a')的话就不正常
追答
clearInterval(adTimer);
“adTimer = setInterval(function(){” 这句前面加上上面那句。
或者
去掉后面trigger("mouseleave");
为什么会有这个问题呢？因为你后面那句trigger("mouseleave");
当是li元素时，它只有一个元素，所以mouseleave只被触发一次，只有一个定时器再运行，所以没问题。
当是a元素时，有4个元素，你触发了mouseleave，等于同时触发了4个定时器，所以运行起来会计算错误。解决办法就是，每次都清除定时器，或者不要同时触发~
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
