İşlev, ayarlanan süreden sonra div belleğini gizlemiyor

Question

1 saniyenin yerine 3 saniyeden sonra div'umu gizlemek için // OUT işlevine ihtiyacım var. Sorun şu ki, div gösterildikten sonra // OUT işlevini tetiklemek için bir şey uygulamalıyım ama nasıl çözeceğimi bilmiyorum. lütfen yardım et. // OUT işlevi için // OUT işlevine ihtiyacım var, // IN işlevine herhangi bir şey eklemek istemiyorum, çünkü bazı bölümler kaydırdıktan sonra görünürler ve ben de bunları yerleşik zamanda gizlemelerini istiyorum.

// 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>