CODEWITHSUNDEEP
javascriptjqueryhtml
Ivan Soler
Ivan Soler

Reputation: 153

Function doesn't hide div after setted time

I need the //OUT function to hide my div after 3 seconds instead of 1 second. I guess the problem is that I should apply something to trigger the //OUT function after the div is shown but I don't know how to solve it. please help. I need the function //OUT to work independently, don't want to add anything to the //IN function because some divs appear after scroll and I want them to hide at setted time also.

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

Upvotes: 0

Views: 50

Answers (2)

user2950720
user2950720

Reputation: 941

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

Upvotes: 0

user2950720
user2950720

Reputation: 941

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

Upvotes: 1

Related Questions