问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
erichooooow
    2291530

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

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

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

    javascript
    阅读 1.6k
    2 个回答
    得票最新
    头像
    小明
      1.3k310

      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";
});
      头像
      toBeTheLight
        16.6k41634
        <body>
<span id="btn">11111111111111</span>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var $btn = $('#btn');
var eventCallbacks = [];
var timer = null;
$btn.on('mouseenter',function(){
    clearTimeout(timer);
    eventCallbacks = [];
    eventCallbacks.push(function(){
        $btn.text('in');
    });
    var timer = setTimeout(function(){
        for(var i=0;i<eventCallbacks.length;i++){
            debugger;
            eventCallbacks[i]();
        }    
    },2000)            
});
$btn.on('mouseout',function(){
    eventCallbacks.push(function(){
        $btn.text('out');
    })
});

</script>

        这么写能实现，就是看起来有些丑。

        查看全部 2 个回答
        推荐问题