关于延迟顺序显示， 怎么敲代码才能优雅实现？

Question

鼠标移入<p id="test">test</p>, 2秒后在<p id="info"></p>中提示mouseenter.

鼠标移出<p id="test">test</p>, 在<p id="info"></p>中提示mouseleave.

要求leave的信息必须等mouseenter显示后，再显示（有顺序)。 应该怎么写事件？

Answer 1

Try this:var $test = $('#test'),    $info = $('#info'),    status;$test.on('mouseenter',function(){    status = "";    $info.text('mouseenter').fadeOut(0).delay(2000).fadeIn(300, function(){        status === "out" ? $(this).text('mouseleave') : status = "in";    });});$test.on('mouseout',function(){    status === "in" ? $info.text('mouseleave') : status = "out";});