Question

I’m trying to have two elements slide in on a single click. I’d like the first element (an img) to slide in from the left and the other element (a p tag) to slide in from the right on click of a button (an li). Then, when another button is clicked, I’d like the first two elements to fade away and the next two elements (corresponding to the button clicked) slide in.

Is there a way to loop through these so they are always sliding in.

$(‘#nav-button-1’).click(function() {

   $('#people-2').hide();
   $('#people-3').hide();
   $('#people-1').show();

$('.slideleft').animate({
    marginLeft: '103px'
  }, 1000, function() {
    // Animation complete.
});
$('#slideright').animate({
    marginRight: '12px'
  }, 1000, function() {
    // Animation complete.
});

});

Answer 1

Here is an example to get started.

I made a function out of your original JS

function doAnimation(id) {
    $(id).children('.slideleft').fadeIn(function () {
        $(this).animate({
            marginLeft: '103px'
        }, 1000, function () {
            // Animation complete.
        });
    });
    $(id).children('.slideright').fadeIn(function () {
        $(this).animate({
            marginRight: '12px'
        }, 1000, function () {
            // Animation complete.
        });
    });
}

Here is a method that is called on the button presses. It takes in the ID of the wrapper where the animated items are contained and eventually calls the above method.

function animatePeople(id) {
    // If there are visible people
    if ($('.people:visible').length > 0) {
        // Fade out the visible people and then process the following callback function
        $('.people:visible').fadeOut(function () {
            // Reset the margins
            $('.people').css({
                'margin-left': '',
                'margin-right': ''
            });
            // Do the new animation
            doAnimation(id);
        });
    } else {
        // Do the new animation
        doAnimation(id);
    }
}

Lastly, these are the handlers for the buttons.

$('#nav-button-1').click(function () {
    animatePeople('#people-holder-1');
});
$('#nav-button-2').click(function () {
    animatePeople('#people-holder-2');
});

jsfiddle