設定された時間後に関数divが非表示にならない

Question

divを1秒ではなく3秒後に非表示にするには// OUT関数が必要です。私は問題は、私はdivを表示した後// OUT関数をトリガするために何かを適用する必要がありますが、私はそれを解決する方法を知らないということですね。助けてください。独立して動作する// OUT関数が必要です。// IN関数に何も追加しないようにするには、スクロール後にdivが表示され、設定された時刻に非表示にしたいからです。

// OUT 
 
$(function() { 
 
    $("[class*=outtime]").each(function() { 
 
     var retraso = parseInt($(this).attr("class").match(/outtime\d+/g)[0].replace("outtime","")); 
 
     setInterval("$('.outtime" + retraso + "').fadeOut(0)", retraso * 1000); 
 
    }); 
 
}); 
 

 
// IN 
 
$(function() { 
 
    $("[class*=intime]").each(function() { 
 
     var retraso = parseInt($(this).attr("class").match(/intime\d+/g)[0].replace("intime","")); 
 
     $(this).delay(retraso * 1000).fadeIn(0); 
 
    }); 
 
});

.cuadrado{ height:100px;width:100px; background:red;display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cuadrado intime2 outtime3"> 
 
</div>

Answer 1

// OUT 
 
function fadeOut(){ 
 
    $("[class*=outtime]").each(function() { 
 
     var retraso = parseInt($(this).attr("class").match(/outtime\d+/g)[0].replace("outtime","")); 
 
     $(this).fadeTo(retraso*1000,0); 
 
    }); 
 
}; 
 

 
// IN 
 
function fadeIn(){ 
 
    $("[class*=intime]").each(function() { 
 
     var retraso = parseInt($(this).attr("class").match(/intime\d+/g)[0].replace("intime","")); 
 
     $(this).fadeTo(retraso*1000,1, function(){ 
 
     fadeOut(); 
 
     }); 
 
    }); 
 
}; 
 
fadeIn();

.cuadrado{ height:100px;width:100px; background:red;display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cuadrado intime2 outtime3"> 
 
</div>

Answer 2

$(document).ready(function() { 
 
    $(".cuadrado").each(function() { 
 
    var el = $(this); 
 
    var outtime = parseInt(el.attr("class").match(/outtime\d+/g)[0].replace("outtime", "")) * 1000; 
 
    var intime = parseInt(el.attr("class").match(/intime\d+/g)[0].replace("intime", "")) * 1000; 
 
    el.fadeTo(intime, 1).fadeTo(outtime, 0); 
 
    setInterval(function() { 
 
     el.fadeTo(intime, 1).fadeTo(outtime, 0); 
 
    }, outtime + intime); 
 
    }); 
 
});

.cuadrado { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cuadrado intime2 outtime3"> 
 
</div>