Question

リンクをクリックするたびにウィンドウの外側からdivをアニメーション化しようとしていますが、もう一度は動作しません。

<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

ちょうどあなたのコード内でrightためmargin-leftを変更：

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

あなたはすべてのスタイル

を再初期化するためにトリックを使用することができます

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

Answer 4

最初のアニメーションの最後では、要素は{'margin-left':'-100%', 'right': '100px'}です。

要素は元の設定にリセットされないため、2番目のアニメーションの開始時にはまだ{'margin-left':'-100%', 'right': '100px'}です。 .css()と.animate()ディレクティブは、例えばmargin-leftを同じプロパティに対処するため

最も簡単なソリューションです。こうすれば、ディレクティブはアニメーションのリセットとして機能します。以下に、あなたの#contentDivを置き換えることにより、

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

Answer 5

：

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

と、次の

$("#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

であなたのjqueryを交換し、これを試してみてください：

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