Question

JS里鼠标停留延迟触发动作,代码如下!

<style>
*{margin:0;padding:0;}
.clear{clear:both;height:0;width:0; line-height:0; overflow:hidden;}
.options{width:200px;height:200px;border:1px solid #ddd; border-radius:5px;margin: 50px auto;}
.tit{ line-height:36px; border-bottom:1px solid #ddd;}
.tit h3{ text-indent:35px; font-size:16px; background:url('aaa.png') no-repeat 10px 10px;}
.option{padding:10px;}
.option span{ display:block;float:left;font-size:12px; position:relative; line-height:20px; padding:0 10px; border:1px solid #ccc; border-radius:3px;margin:5px; cursor:pointer;}
.option span p{ position:absolute; display:none; top:22px; left:0; background:#0C9; color:#fff; border:1px solid #0C9;width:80px; line-height:22px;font-size:12px;z-index:9; padding:5px 10px; border-radius:5px;}
.option span.on,.option span:hover{ background:#0C9; color:#fff; border:1px solid #0C9;}
</style>

<div class="options clearfix">
<div class="tit">
<h3>标题</h3>
</div>
<div class="option"> <span>事项
<p>事项说明内容</p>
</span><span>事项
<p>事项说明内容</p>

</span>
<div class="clear"></div>
</div>
</div>
</body>
<script>
$('.options').find('span').each(function(){
$(this).mouseover(function() {
$(this).find('p').slideDown().fadeIn(400)
})
$(this).click(function(){
$(this).parent('.option').find('span').removeClass('on')
$(this).addClass('on')
})
$(this).mouseout(function(){
$(this).find('p').css({'display':'none'}).fadeOut(150)
})
})
</script>

在鼠标停留的事件上想加个延迟的效果(鼠标在触发项上停留1秒后触发效果) 用setTimeout之后P弹出层反而不出来...求解!
问题以解决...谢谢各位关注...
$('.options').find('span').each(function(){
var a = $(this)
pShow = null
$(this).mouseover(function(){
$(a).parent('.option').find('span p').css({'display':'none'})
clearTimeout(pShow)
pShow = setTimeout(function(){
$(a).find('p').slideDown(300).fadeIn(300)
},700)
})
$(a).click(function(){
$(a).parent('.option').find('span').removeClass('on')
$(a).addClass('on')
})
$(a).mouseout(function(){
clearTimeout(pShow)
$(a).find('p').slideUp(150).fadeOut(150)
})
})

Answer 1

你先把this对象绑到你javascript新建的对象上 用了setTimeout之后this指针指向的位置就变了，p标签就找不到了
var obj = $(this);
var interval_slidedown = setTimeout((function(){
obj.find("p").slideDown().fadeIn(400);

}),1000);

然后友情提示 fadeIn fadeOut是压栈进入的函数，清空很难，如果持续不断的hover有可能会造成动画无限制加载，在之前最好是clearTimeout一下