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

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";

});