How to combine jQuery functions into smaller scripts

Question

I'm still learning jQuery, and the biggest issue I'm having is how to take several smaller sections of code and combine them into a much more efficient script.

For example, I have a gallery of 7 items, and every item fades in, but with a different delay. (So image number 1 fades in after 1 second, image number 2 after 1.5, image number 3 after half a second etc) so that they do not all fade in at the same time. See the second section here.

The problem is, my code ends up quite long as I'm repeating the same code but with a different delay and targeting a different div. I need advice on how to make this more efficient. E.g:

$( ".gal:first-child" ).delay(800).animate({
    opacity:1
  }, 1800, function() {
  });

  $( ".gal:nth-child(2)" ).delay(2000).animate({
    opacity:1
  }, 1800, function() {
  });

  $( ".gal:nth-child(3)" ).delay(800).animate({
    opacity:1
  }, 1800, function() {
  });

  $( ".gal:nth-child(4)" ).delay(1500).animate({
    opacity:1
  }, 1800, function() {
  });

   $( ".gal:nth-child(5)" ).delay(800).animate({
    opacity:1
  }, 1800, function() {
  });

    $( ".gal:nth-child(6)" ).delay(1900).animate({
    opacity:1
  }, 1800, function() {
  });

     $( ".gal:last-child" ).delay(1500).animate({
    opacity:1
  }, 1800, function() {
  });

How would you make this more efficient?
Would randomising the delay between two set values help?
How would you ensure all the divs in the gallery get selected? (Randomise nth-child 1-7 maybe?)

Is there a pattern? Is the number off milliseconds' delay relative to the index of each element? — George
– George, Commented Jul 31, 2014 at 8:40
@oGeez no pattern, in fact I'm trying to make it fairly "random" as I do not want them to fade in in a sequence, I want it to look a little more fluid. — Francesca
– Francesca, Commented Jul 31, 2014 at 8:42

Silviu Burcea · Accepted Answer · 2014-07-31 08:51:13Z

3

Add a property in your HTML tags, like data-delay. Sample HTML:

<div class="gal" data-delay="1000">
  I will show up after 1000 ms
</div>

You can now do this:

$(".gal").each(function() {
  $(this).delay(+$(this).data("delay"))
         .animate({ opacity: 1 }, function() {});
});

Of course, you can use random, but I think that JS should do very few things. The delay can be calculated on the server.

edited Jul 31, 2014 at 8:51

answered Jul 31, 2014 at 8:44

Silviu Burcea

5,3672 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Francesca Over a year ago

Thanks, this seems like a really nice solution.

Barmar · Accepted Answer · 2014-07-31 08:44:36Z

3

Here's how to give them random delays up to 5 seconds:

$(".gal").each(function() {
    var delay = Math.random()*5000;
    $(this).delay(delay).animate({
        opacity: 1
    }, 1800, function() {
    });
});

answered Jul 31, 2014 at 8:44

Barmar

789k57 gold badges555 silver badges669 bronze badges

Comments

Arun P Johny · Accepted Answer · 2014-07-31 08:42:41Z

0

As I can't see any pattern in the numbers you can use an array like

var $els = $(".gal");
$.each([800, 2000, 800, 1500, 800, 1900, 1500], function (i, val) {
    $els.filter(':nth-child(' + (i + 1) + ')').delay(val).animate({
        opacity: 1
    }, 1800, function () {});
})

answered Jul 31, 2014 at 8:42

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2014-07-31 08:47:43Z

0

You may use like this:

var arr = [800,2000,800,1500,800,1900,1500];
for(var i=0; i<arr.length; i++){
$( ".gal" ).delay(arr[i]).animate({
    opacity:1
  }, 1800, function() {
  });
}

But I would recommend you to use data like @Silviu Burcea answered.

answered Jul 31, 2014 at 8:47

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Comments

dialogik · Accepted Answer · 2014-07-31 09:12:13Z

0

Try something like this:

    var count =0; 
    $(".gal").each(function(index) {
        $(this).delay(++count*500).animate({ opacity: 1 },1800, function() {

        });
    });

edited Jul 31, 2014 at 9:12

dialogik

9,59218 gold badges79 silver badges123 bronze badges

answered Jul 31, 2014 at 8:47

Sandeep Pal

2,1951 gold badge16 silver badges14 bronze badges

1 Comment

George Over a year ago

It's already been mentioned that the delays are not relative to the index; they are closer to random.

Collectives™ on Stack Overflow

How to combine jQuery functions into smaller scripts

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related