Question

我在fadeOut函数确定的一段时间后尝试setTimeout一个对象。我试过这个：

var timer;
$(window).on('mousemove', function () {
    $("#my_div_id").fadeIn(1900)
    $('#my_div_id').addClass('show');
    try {
        clearTimeout(timer);
    } catch (e) {}
    timer = setTimeout(function () {    
        $('#my_div_id').fadeOut(1900).removeClass('show');   
    }, 5960); 
});

基本上当你不移动鼠标时，jQuery会隐藏my_div_id，当你移动鼠标时，它会显示div并正确地淡入。

为什么.fadeOut(1900)不起作用？

Answer 1

试试，未经测试。

var timer;
$(window).on('mousemove', function () {
$("#my_div_id").fadeIn(1900)
$('#my_div_id').addClass('show');
try {
    clearTimeout(timer);
} catch (e) {}
    timer = setTimeout(function () {    
    $('#my_div_id').fadeOut(1900,function() {   
   $(this).removeClass('show');
    });   
  }, 5960); 
});

Answer 2

每次鼠标移动时，您都在创建相同的jQuery对象并调用fadein动画，这在性能上并不理想。

因此，您可以将不透明度移动到CSS并缓存jQuery对象。

＆＃13;

var timer,
    $myId = $('#my_div_id');

$(window).on('mousemove', function () {
    $myId.addClass('show');
    timer && clearTimeout(timer);
    timer = setTimeout(function () {    
        $myId.removeClass('show');
    }, 5960); 
});

＆＃13;

#my_div_id {
    width: 50px;
    height: 50px;
    background-color: #C00;
    opacity: 0;
    -moz-transition: opacity 1900ms;
    -o-transition: opacity 1900ms;
    -webkit-transition: opacity 1900ms;
    transition: opacity 1900ms;
}

#my_div_id.show {
    opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="my_div_id"></div>

＆＃13;

我如何使用jQuery淡出setTimeout函数？

2 个答案: