SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Randomise delay on multiple elements

    Hi all, I have written this to make a number of elements pop out slightly on the page, basically to show the user that they require attention. It has a slight delay so that the page loads and then runs.

    Code JavaScript:
    $(".shown").delay(400).animate({left:'7px'},{duration:200, easing:'swing'})
    $(".shown").animate({left:'0px'}, 350)

    What I would like is for this to cycle through each element on the page one by one (there could be between 1 and 10) with a slight delay so they don't move in unison.

    But also to randomise this so that so that it doesn't just appear to work through them in order they appear in the markup.

    Hope this makes sense and that it's doable!

    Many thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    What you'll want is an array-like collection of the elements you want to be animated.

    You can then randomize that collection.

    You can then use a function that pops off one of the elements from that random collection and animates that element.

    After the animation is completed, you can use the animations callback parameter, to call that same function, until there's nothing left.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Apologies for the delay, I didn't get an email notification! This sounds great, could you help me write this out? My JS knowledge is very minimal, took me all my might to write that!

    Many thanks

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikeebee8 View Post
    This sounds great, could you help me write this out?
    What HTML/CSS are you starting from?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <a href="#" class="case"> <img src="images/case3.jpg" alt="" />
    		        <p class="shown"><span>&pound;15m extra sales in the first six months</span></p>
    		        <p class="hidden"><span>Company name Read more</span></p>
    		        </a>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Did you know that it's invalid for anchors to contain paragraphs, or other block-level elements?

    You can use a span though, and set its CSS to display as a block if you want to simulate a paragraph.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, yes I know, I'm using a HTML5 doctype so all is well Will that effect the JS?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikeebee8 View Post
    Hi Paul, yes I know, I'm using a HTML5 doctype so all is well
    You may find that browsers like IE7 and IE8 may have trouble there.

    Quote Originally Posted by mikeebee8 View Post
    Will that effect the JS?
    Hopefully not.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I'll change the HTML if I encounter issues in IE. Are you still ok to help me write the JS?

    Cheers

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikeebee8 View Post
    Hi Paul, I'll change the HTML if I encounter issues in IE. Are you still ok to help me write the JS?
    Yes, but before I begin I want to start from a test page that shows the effect that you currently have.

    What CSS do you use with that HTML, that allows animated effect to occur.
    Currently without any styling the effect is denied.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks, I've attached an example here.

    www.mikeebee.com/other/html.zip

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikeebee8 View Post
    Ok thanks, I've attached an example here.

    www.mikeebee.com/other/html.zip
    Thanks, now where's that list.

    1. What you'll want is an array-like collection of the elements you want to be animated.
    2. You can then randomize that collection.
    3. You can then use a function that pops off one of the elements from that random collection and animates that element.
    4. After the animation is completed, you can use the animations callback parameter, to call that same function, until there's nothing left.


    So, first thing - an array-like collection of the elements you want to be animated.

    We can make that an actual array.

    Code javascript:
    var shown = $(".shown").toArray();

    Step 2 is to randomize them.

    Code javascript:
    shown.sort(function () {
        return (Math.round(Math.random())-0.5);
    });

    Now we have an array of randomly sorted items.

    Step 3, is to use a function that pops off one of the elements from that random collection and animates that element

    Code javascript:
    function performAnimation(arr) {
        var el = arr.pop();
        $(el).animate({left:'7px'}, 300);
        $(el).animate({left:'0px'}, 300);
    }
    ...
    performAnimation(shown);

    And step 4 is that after the animation is completed, you can use the animations callback parameter, to call that same function, until there's nothing left.

    Code javascript:
    function performAnimation(arr) {
        var el = arr.pop();
        $(el).animate({left:'7px'}, 300, function () {
            performAnimation(arr);
        });
        $(el).animate({left:'0px'}, 300);
    }

    Let's now tidy that up by moving the animate 0 part in to the same callback function, where the this keyword can be used, which also means that we don't need the el variable anymore.

    Code javascript:
    function performAnimation(arr) {
        $(arr.pop()).animate({left:'7px'}, 300, function () {
            $(this).animate({left:'0px'}, 300);
            performAnimation(arr);
        });
    }

    We can even tidy up the shown variable and sorting part, so that it now becomes:

    Code javascript:
    performAnimation($(".shown")
        .toArray()
        .sort(function () {
            return (Math.round(Math.random())-0.5);
        })
    );

    The complete code after all of that is:

    Code javascript:
    function performAnimation(arr) {
        $(arr.pop()).animate({left:'7px'}, 300, function () {
            $(this).animate({left:'0px'}, 300);
            performAnimation(arr);
        });
    }
    performAnimation($(".shown")
        .toArray()
        .sort(function () {
            return (Math.round(Math.random())-0.5);
        })
    );
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's brilliant thank you! And thanks for the detailed explanation that's really helpful. Is it possible to delay the first function running after page load as it was before? I tried adding a delay in various places but it didn't work.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikeebee8 View Post
    That's brilliant thank you! And thanks for the detailed explanation that's really helpful. Is it possible to delay the first function running after page load as it was before? I tried adding a delay in various places but it didn't work.
    setTimeout can be used for that.

    Code javascript:
    setTimeout(function () {
        ...
    }, duration);

    In this case it would be:

    Code javascript:
    setTimeout(function () {
        performAnimation($(".shown")
            .toArray()
            .sort(function () {
                return (Math.round(Math.random())-0.5);
            })
        );
    }, 400);
    Last edited by paul_wilkins; Feb 17, 2011 at 04:49.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks fort getting back to me. That doesn't appear to be working. I have updated the link to the files with the current script. Could you have a look please?

    www.mikeebee.com/other/html.zip

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikeebee8 View Post
    Hi, thanks fort getting back to me. That doesn't appear to be working. I have updated the link to the files with the current script. Could you have a look please?
    Oh yes, there was a silly mistake in my post, sorry. The function should come first before the duration.

    I have now updated my post, and you should find on updating your code that it works as expected.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats cracked it! Thanks for all your help.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •