div animation not repeating on click in jquery

Question

I am trying to animate div from outside the window to inside every time I click on link but it works only one time not again, please help me where I am wrong.

<li>
    <a id='ajaxLoad1' onclick='ajaxFunc(event, this);' href="url1">1st content</a>
</li>
<li>
    <a id='ajaxLoad2' onclick='ajaxFunc(event, this);' href="url2">2nd content</a>
</li>

<div id='contentDiv' style="background: #98bf21; height: 200px; width: 800px;  position: absolute;"></div>

function ajaxFunc(param, thisParam) {
    param.preventDefault();

    var href = $(thisParam).attr('href');
    var position = '100px';

    $('#contentDiv').css('margin-left','-100%');
    $("#contentDiv").animate({right: position});

    $('#contentDiv').load(href);
}

Answer 1

$('#contentDiv').css({
  'right': 'initial',
  'margin-left': '-100%'
 });

Answer 2

Just change margin-left for right in your code:

 function ajaxFunc(param, thisParam) { param.preventDefault(); var href = $(thisParam).attr('href'); var position = '100px'; $('#contentDiv').css('right','100%'); $("#contentDiv").animate({right: position}); $('#contentDiv').load(href); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li> <a id='ajaxLoad1' onclick='ajaxFunc(event, this);' href="url1">1st content</a> </li> <li> <a id='ajaxLoad2' onclick='ajaxFunc(event, this);' href="url2">2nd content</a> </li> <div id='contentDiv' style="background: #98bf21; height: 200px; width: 800px; position: absolute;"></div> 

Answer 3

you can use the trick to reinitialize all style

    $('#contentDiv').attr('style','background:#98bf21;height:200px;width:800px;position:absolute;');
$("#contentDiv").animate({left: '0px'});

Answer 4

At the end of the first animation the element has {'margin-left':'-100%', 'right': '100px'} .

The element is not reset to its original settings so at the start of the second animation it still has {'margin-left':'-100%', 'right': '100px'} .

The simplest solution is for the .css() and the .animate() directives to address the same property, eg margin-left . That way, the .css() directive will act as a reset for the animation.

$('#contentDiv')
    .css('margin-left', '-100%')
    .animate({'margin-left': 0})
    .load($(thisParam).attr('href'));

Answer 5

by replacing your #contentDiv with the following:

<div id='contentDiv' style="background:#98bf21; height:200px;
  width:800px;  position:absolute; "> 
<a href='#' class='closeme'>move me back</a>
  <div class=""></div>
</div>

and replacing your jquery with the following

 $("#ajaxLoad1").click(function(){

    var href = $(this).attr('href');
    var position = '100px';

    $('#contentDiv').css('left','100px');
    $("#contentDiv").animate({right: position});

    $('#contentDiv > div').load(href);
    return false;

   })


   $(".closeme").click(function(){
        $(this).parent().css({
            'left' : '-1000px'
        });

   })

Answer 6

Try this:

function ajaxFunc(param, thisParam) {
    param.preventDefault();

    var href = $(thisParam).attr('href');
    var position = '100px';

    // Need to reset
    $('#contentDiv').css({
      'marginLeft': 0,
      'right': 0
    });


    $('#contentDiv').css('margin-left','-100%');
    $("#contentDiv").animate({right: position});

    $('#contentDiv').load(href);
}

Ref: http://jsbin.com/derofu/1/edit?html,js,output