Question

Ok firstly – its not a toggle() as such.

This code is supposed to work like a slider. 1 Div is showing, you click a button, and the next div shows, click another button, and the first div shows.

This works so far, but it doesn’t work going backwards. So the button works to show the 2nd Div, but hitting the ‘less’ button I made just makes the second div disappear and the 1st remains hidden.

Here is the code:

$('.more').click(function() {
    $('.c1')
        .animate({ left: "-828px" }, 600, 'easeInOutQuint')
        .delay(300, function() {
            $('.c2').animate({ left: "0px" }, 600, 'easeInOutQuint'); 
        }
    );
});

$('.less').click(function() {
    $('.c2')
        .animate({ left: "828px" }, 600, 'easeInOutQuint')
        .delay(300, function(){
            $('.c1').animate({ left: "0px" }, 600, 'easeInOutQuint'); 
        }
    );
});

What am I missing? And how could I do this so that I’m basically not repeating the same code twice?

Answer 1

You have a wrong concept about .delay.

In jquery documentation:

Description: Set a timer to delay execution of subsequent items in the queue.

And its parameters are: duration [, queueName].

Also, from SO answer:

The delay() function only applies to actions queued on the element

So I think your best choice is, as @nicolast said, use the callbacks. Here it is working. And the final code is:

$('.more').click(function() {
    $('.c1')
        .animate({ left: "-400px" }, 600, function() {
            $('.c2').animate({ left: "0px" }, 600);
        }
    );
});

$('.less').click(function() {
    $('.c2')
        .animate({ left: "400px" }, 600, function(){
            $('.c1').animate({ left: "0px" }, 600);
        }
    );
});