Funktion versteckt div nach der eingestellten Zeit nicht

Question

Ich brauche die // OUT-Funktion, um mein div nach 3 Sekunden statt 1 Sekunde zu verbergen. Ich schätze das Problem ist, dass ich etwas anwenden sollte, um die // OUT-Funktion auszulösen, nachdem das div angezeigt wird, aber ich weiß nicht, wie man es löst. bitte hilfe. Ich brauche die Funktion // OUT, um unabhängig zu arbeiten, will der // IN-Funktion nichts hinzufügen, weil einige divs nach scroll erscheinen und ich möchte, dass sie auch zur eingestellten Zeit verschwinden.

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