Sequential order of Javascript functions

Question

I'm having a bit of a problem with Javascript. I have a list of article titles which, when you click a title, the corresponding article appears on the right hand side (fixed at the top of the page). I have got these articles to fade in/out using Javascript. I also have a function which, when you are scrolled down and click on an article title, scrolls the page slowly back up to the top.

The problem I have is that when the page scrolls up and the article changes at the same time, the animations on both become quite choppy, especially in Safari. Is there any way to make the page scroll to the top first, then make the article change?

I'm basically asking if there is away to make my Javascript functions happen one after the other, rather than at the same time?

Heres my Javascript:

$(document).ready(function () {
   $('.scrollup').click(function () {
      $("body").animate({
         scrollTop: 0
      }, 'slow');
      return false;
   });
   $('.articlelist ul li').click(function() {
      var i = $(this).index();
      $('.fullarticle').fadeTo(500,0);
      $('#article' + (i+1)).fadeTo(500,1);
   });
});

Any help would be hugely appreciated!

Thank you

Use the callback functions to run them one after the other. See api.jquery.com/animate and look at the complete function. — ArrayKnight
– ArrayKnight, Commented Mar 24, 2014 at 22:27

Wilmer · Accepted Answer · 2014-03-24 23:00:10Z

2

I'm guessing you want to keep the click functionality on your article list and only the elements with class scrollup have 2 animations.

$(document).ready(function () {

    $('.articlelist ul li').click(function () {
        var i = $(this).index();
        if ($(this).is(".scrollup")) {
            $("body").animate({
                scrollTop: 0
            }, 'slow', function () {//when animation completes
                fadeArticle(i);
            });
        } else {
            fadeArticle(i);
        }

    });

    function fadeArticle(i) {
        $('.fullarticle').fadeTo(500, 0);
        $('#article' + (i + 1)).fadeTo(500, 1);
    }
});

answered Mar 24, 2014 at 23:00

Wilmer

2,5091 gold badge14 silver badges8 bronze badges

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

2 Comments

Wilmer Over a year ago

can you provide a sample of html of the article list?

user2798841 Over a year ago

<div class="articlelist"> <ul> <li onclick="toggleArticles('article1')" class="scrollup"><a href="#">Article 1</a></li> <li onclick="toggleArticles('article2')" class="scrollup"><a href="#">Article 2</a></li> <li onclick="toggleArticles('article3')" class="scrollup"><a href="#">Article 3</a></li> </ul>

Blake Hair · Accepted Answer · 2014-03-24 22:49:28Z

1

In your call to animate() you'd want to add a function to be called upon completion. The animate function provided by JQuery takes a function as an optional parameter. When the animation completes that function is called.

You could use something like this:

$('.scrollup').click(function () {
    $("body").animate({
        scrollTop: 0
    }, 'slow', showArticle);
    return false;
});

showArticle would be a call to a function that fades the article in like the anonymous one in your click listener. You would probably need some way to pass an argument about which article should be shown.

edited Mar 24, 2014 at 22:49

answered Mar 24, 2014 at 22:31

Blake Hair

1511 silver badge13 bronze badges

4 Comments

Fizz Over a year ago

it should be showArticle, else you'll call that function immediately

Blake Hair Over a year ago

Thanks, I always make that mistake.

user2798841 Over a year ago

I'm not sure I fully understand how to link the two functions together?

Blake Hair Over a year ago

@user2798841 I'm not sure what you mean exactly. I've edited my answer to provide a bit more explanation of the animate functions callback parameter.

ant_iw3r · Accepted Answer · 2014-03-24 22:39:42Z

0

I'm relatively new to this, but I think this may work. What I'm trying to do is enclose each of these as a callable function and then pass one function as the callback to the other.

$(document).ready(function () {
scrollTop(showArticle());
});


function scrollTop(callback) {
    $('.scrollup').click(function () {
        $("body").animate({
            scrollTop: 0
        }, 'slow');
        callback;
    });
}

function showArticle() {
    $('.articlelist ul li').click(function () {
        var i = $(this).index();
        $('.fullarticle').fadeTo(500, 0);
        $('#article' + (i + 1)).fadeTo(500, 1);
    });
}

answered Mar 24, 2014 at 22:39

ant_iw3r

2221 gold badge2 silver badges10 bronze badges

3 Comments

user2798841 Over a year ago

both functions still seem to occur at the same time

Blake Hair Over a year ago

I don't believe this code does anything terribly different from the example posted in the question. It adds two click listeners on document ready, but the first listener uses a callback to add the second listener.

ant_iw3r Over a year ago

Yeah you're right Blake the call to fade the article needs to be the callback on animate. @Wilmer answer looks solid.

Collectives™ on Stack Overflow

Sequential order of Javascript functions

3 Answers 3

2 Comments

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related