设定时间后功能不会隐藏 div答案

【问题标题】：Function doesn't hide div after setted time设定时间后功能不会隐藏 div
【发布时间】：2016-04-01 21:35:02
【问题描述】：

我需要 //OUT 函数在 3 秒而不是 1 秒后隐藏我的 div。我想问题是我应该在显示 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>

【问题讨论】：

你可以使用 .fadeTo(3000, 0).fadeTo(1000,1);
它不会像我需要的那样工作。
$(element).fadeTo(3000,0); 3 秒持续时间到不透明度 0（淡出）
所以你想让 div 每隔 3 秒出现和重新出现一次？
@theblindprophet 不，我希望 div 使用 //IN 函数在 2 秒后出现，并在 //OUT 函数后 3 秒消失；不会再出现。

标签： javascript jquery html

【解决方案1】：

$(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>

【讨论】：

这不是我需要的，你可以在上面的 cmets 上查看。感谢您的回答:)
停止它重复删除 setInterval
问题是我希望 //OUT 函数单独工作，因为它恰好与在滚动或单击时显示 div 的其他函数混合在一起。

【解决方案2】：

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

【讨论】：

用 $(this).delay(retraso * 1000).fadeIn(0, , function(){ fadeOut(); })); 重用你之前拥有的东西，我猜你可能想要不透明度的过渡