Delays to be based on what elements are populated

29
January 23, 2019, at 03:10 AM

What I am trying to do is create a function which will change the delays of each element based on if they are to be shown or not.

The delays are currently hard coded in which means that if the user does not choose to wire up any subheader texts, they are left waiting for a one second delay.

I have looked around but have not been able to find anything like this, any suggestions would be appreciated!

Below is a snippet of my code.

 RemoveElements(); 
 
    $('#header').delay(1500).animate({'opacity': [1, "linear"]}, 500); 
    $('#subheader1').delay(2000).animate({'opacity': [1, "linear"]}, 500); 
    $('#text1').delay(2500).animate({'opacity': [1, "linear"]}, 500); 
    $('#subheader2').delay(3000).animate({'opacity': [1, "linear"]}, 500); 
    $('#text2').delay(3500).animate({'opacity': [1, "linear"]}, 500); 
    $('#subheader3').delay(4000).animate({'opacity': [1, "linear"]}, 500); 
    $('#text3').delay(4500).animate({'opacity': [1, "linear"]}, 500); 
 
    function RemoveElements() { //REMOVE TEXT 
      if ($('#header')[0].innerHTML == 'none') $('#header').css('display', 'none'); 
      if ($('#subheader1')[0].innerHTML == 'none') $('#subheader1').css('display', 'none'); 
      if ($('#text1')[0].innerHTML == 'none') $('#text1').css('display', 'none'); 
      if ($('#subheader2')[0].innerHTML == 'none') $('#subheader2').css('display', 'none'); 
      if ($('#text2')[0].innerHTML == 'none') $('#text2').css('display', 'none'); 
      if ($('#subheader3')[0].innerHTML == 'none') $('#subheader3').css('display', 'none'); 
      if ($('#text3')[0].innerHTML == 'none') $('#text3').css('display', 'none'); 
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<h1 id="header">Header</h1> 
<h2 id="subheader1" class="moveSub1">Subheader1</h2> 
<p id="text1" class="movePara1">Text 1</p> 
<h2 id="subheader2" class="moveSub2">none</h2> 
<p id="text2" class="movePara2">Text 2</p> 
<h2 id="subheader3" class="moveSub3">none</h2> 
<p id="text3" class="movePara3">none</p>

Thank you for any help:)

Answer 1

I made you a fiddle. I hope this is what you were looking for. https://jsfiddle.net/wk2erc5q/

I outsourced some of the js stuff to the HTML so the JS looks like this now:

RemoveElements();
function RemoveElements() { 
  $('.check-element').each(function(){
    let element = $(this);
    if(element.html() == 'none'){
      setTimeout((function() {
       element.animate({'opacity': [0, "linear"]}, 500);
      }), element.attr('data-delay'));
    }
  });
}

If you want to set the elements to display: none and not just opacity: 0 (since they will still need space), just replace the line in the set timeout with element.hide();

You could even work without the data-delay tag in the HTMl element when the animation time always increases by 500. Just set let animationTime = 500 at the beginning of your RemoveElements() function and then after if-statement you can do animationTime = animationTime + 500;

https://jsfiddle.net/589xp4tf/

READ ALSO
javascript find object by same keys and merge them

javascript find object by same keys and merge them

So i'm have an array of objects, i've created two dictonaries to map the namesI want to find all object with the same key and merge them

40
Google Trends API, how to work with the results?

Google Trends API, how to work with the results?

I'm using the google trends api to gather information, but I am having issues outputting specific parts of the result

21
Call local JS package with NodeJS/npm

Call local JS package with NodeJS/npm

I am running NodeJS and have installed the table2csv package via npm

16
Creating image (PNG or JPEG) from PDF along with HTML image maps of text in the image?

Creating image (PNG or JPEG) from PDF along with HTML image maps of text in the image?

I am documenting a system I maintainThis documentation contains a diagram I created in TeX/TikZ which gets rendered to a PDF file

39