JQuery and slide left

Question

I have a link named 'changediv'. On the click of this link I want one div to slide out of the browser left and at the same time have a div slide left into the browser.

Answer 1

I think you are looking for something like;

$('#changediv').click(
function() {
    $('#div1').animate({"width": 0}, "slow");
    $('#div2').animate({"margin-left": 0}, "slow");
});

Here is the working demo

or if your body (or parent div) has a fixed width, you may try

$('#changediv').click(
function() {
    $('#div1').animate({"width": 0}, "slow");
    $('#div2').animate({"width": 400}, "slow");
}); //I used a width of 400px for testing

Here is the working demo

Hope this helps..

Answer 2

For example, you can test this:

$('.changeDiv').on('click', function() {

  $('#div_one').animate({
     left: -9999
  },1000, function() {
     $('#div_two').animate({
        left: 200
     });
  });

});