Home/ Questions/Q 7807157
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T02:45:53+00:00

Not sure what i’m doing wrong but these divs fade in correctly but don’t

  • 0

Not sure what i’m doing wrong but these divs fade in correctly but don’t fadeOut!

They’re intended to be on structured timeline in time with a mp3, hence the long delay times! 

<!DOCTYPE html>
<html>
<head>
  <style>
div { position: absolute; width: 60px; height: 60px; float: left; display:none; }
.first { background-color: #3f3; left: 0;}
.second { background-color: #33f; left: 80px;}
.third { background-color: #3f3; left: 120px;}
.fourth { background-color: #33f; left: 300px;}
.fifth { background-color: #3f3; left: 400;}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
</head>
<body>

<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>

<script>
    $("button").click(function() {
      $("div.first").delay(15060).show("puff", {}, 300).delay(116010).fadeOut(300);
      $("div.second").delay(40230).show("puff", {},300).delay(28990).fadeOut(300);
      $("div.third").delay(46180).show("puff", {},300).delay(27880).fadeOut(300);
      $("div.fourth").delay(71070).show("puff", {},300).delay(42050).fadeOut(300);
      $("div.fifth").delay(110080).show("puff", {},300).delay(17050).fadeOut(300);
    });
</script>

</body>
</html>

Mathletics i tried what you suggested but it broke it completely, any ideas what i may of done wrong? Sorry muddling through with my limited knowledge of Jquery

Script changed but still not working?

<script>
$("button").click(function() {
  $("div.first").delay(200).show(300, "puff", function() {
 $(this).delay(116010).fadeOut(300);  });
   $("div.first").delay(40230).show(300, "puff", function() {
 $(this).delay(28990).fadeOut(300);  });
   $("div.first").delay(46180).show(300, "puff", function() {
 $(this).delay(27880).fadeOut(300);  });
   $("div.first").delay(71070).show(300, "puff", function() {
 $(this).delay(42050).fadeOut(300);  });
   $("div.first").delay(110080).show(300, "puff", function() {
 $(this).delay(17050).fadeOut(300);  });
});
</script>

Thanks veeTrain, it almost works except i need them to come in at specific times as well as leave at specific times, here’s how i changed the code to try to do that! Thanks in advance it’s much appreciated! 

<!DOCTYPE html>
<html>
<head>
  <style>
div { position: absolute; width: 60px; height: 60px; float: left; display:none; }
.first { background-color: #3f3; left: 0;}
.second { background-color: #33f; left: 80px;}
.third { background-color: #3f3; left: 120px;}
.fourth { background-color: #33f; left: 300px;}
.fifth { background-color: #3f3; left: 400;}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
</head>
<body>

<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>

<script>
    $("button").click(function() {
        console.log("hi");
      $("div.first").delay(15060).show(300);
      $("div.second").delay(40230).show(300);
      $("div.third").delay(46180).show(300);
      $("div.fourth").delay(71070).show(300);
      $("div.fifth").delay(110080).show(300);
        setTimeout(function() {
            $("div.first").fadeOut(300);
        }, 116010);
        setTimeout(function() {
            $("div.second").fadeOut(300);
        }, 28990);
        setTimeout(function() {
            $("div.third").fadeOut(300);
        }, 27880);
        setTimeout(function() {
            $("div.fourth").fadeOut(300);
        }, 42050);
        setTimeout(function() {
            $("div.fifth").fadeOut(300);
        }, 17050);
    });
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could also execute a setTimeout operation like so:

    $("div.first").delay(15060).show(300, "puff");
setTimeout(function() {
    $("div.first").fadeOut(300);
}, 116010);

    Here’s a jsfiddle showing an example. (Note, doesn’t include your ‘puff’ operation)

    This jsfiddle shows with what your timings might be.

    If I’m understanding your intentions, you’ll want the elements to be queued up to hide x seconds AFTER it is first shown. These examples don’t perform that but you should be able to make the calculations yourself and hide the elements exactly when you want to by adding the time for the initial delay.

    E.g.: fade in after 5 seconds; fade out after 5 seconds

    could become fade in after 5 seconds and fade out after *10* seconds

    • 0