Question

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

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

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

在设定的时间后，函数不会隐藏div

2 个答案: