1

I am trying to fade in the elements wrapped in span tags randomly. There are a few examples on stackoverflow, but I cannot get them them to work in my code.

Also.. Is there a more elegant way of doing this than wrapping every single word in span tags?

I am trying to turn akll the spans into an array, then select an element in that array at random, and fade it in via changing the opacity of that element, then remove it from the array Here is a jsfiddle of myy attempt..

https://jsfiddle.net/jnghna9s/2/

My script.js:

$(document).ready(function() {
    $("#contact").click(function() {
    var spans = $("#changingP span").get();

    for(var i =0; i < spans.length; i++) {    
        var index = Math.floor(Math.random() * spans.length);
        $(spans[index]).fadeTo(200, 1, function() {
        spans.splice(index,i);
        }
    })
});
});
MattEm
  • 181
  • 1
  • 8
  • Add a function that parses the text in your words container into tokens, and then using a .each() function wrap the tokens in the span tags. Then your function can work against the modified text. But you should maybe add a class name to the span tags, so that your function doesn't try to mess with ~every~ span on the page (in case you have other spans). – camainc Apr 22 '15 at 21:02
  • Here is a quick fiddle demonstrating my comment: https://jsfiddle.net/umo8swhv/ – camainc Apr 22 '15 at 21:15

3 Answers3

2

I would use complete callback of fadeTo method. Something like this would work:

var spans = $('#changingP span').get();

function fadeIn() {
    var index = Math.floor(Math.random() * spans.length);
    $(spans[index]).fadeTo(200, 1, function() {
        spans.splice(index, 1);
        if (spans.length) {
            fadeIn();
        }
    });
}

fadeIn();
span {
    opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="changingP">
<span>Want </span><span>to </span><span>get </span><span>in</span><span> contact</span><span> with </span><span>me</span><span>?</span>
    <br /><span>Email</span><span>: </span><span>edit</span><span>.</span><span>ed</span><span>email</span><span>@</span><span>gmail</span><span>.</span><span>com</span>
    <br /><span>Link</span><span>edI</span><span>n</span><span>: </span><span>http</span><span>s://w </span><span></span><span>ww.</span><span>lin</span><span>kedi</span><span>n.com</span><span>/</span><span>in/</span><span>edit</span><span>ed</span><span>email</span>

</p>
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • Awesome, thank you! How would I include the .js in brackets? Fairl new to web development and I'm not totally sure what jsFiddle inserts for you.. – MattEm Apr 22 '15 at 21:43
  • Just put the code inside `$(function() { /** code from the answer **/ })`. I omitted it for brevity. – dfsq Apr 22 '15 at 21:54
1

@dfsq answer is good. For geeks like me interested in the jQuery-less version, the following will do too: (see fiddle)

function randomFade(elements) {
  var shownCount = 0,
      indexes = [];
  function appear(el) {
    setTimeout(function() {
      var count = 10, i = setInterval(function() {
        el.style.opacity = (parseFloat(el.style.opacity) || 0) + 0.1;
          if (!count--) 
             clearInterval(i);
        }, 50);
    }, shownCount++*200); 
  }
  function shuffle(o){
    // from http://stackoverflow.com/questions/6274339/
    // how-can-i-shuffle-an-array-in-javascript#answer-6274381
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), 
      x = o[--i], o[i] = o[j], o[j] = x);
    return o;
  };
  for (var i = elements.length; i--;) indexes.push(i);
  indexes = shuffle(indexes);
  for (var f = indexes.length; f--;) appear(elements[indexes[f]]);
}
webketje
  • 10,376
  • 3
  • 25
  • 54
0

Your for loop logic is off. Try this

var maxDelay = 5000;
for(var i=0; i < $length; i++) {
    var random = Math.ceil(Math.random() * maxDelay);
    $('span')eq(i).delay(random).css("opacity","1");
}
damon
  • 1,087
  • 9
  • 12