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

只需在代码中更改margin-left的{{1}}：

＆＃13;

right

＆＃13;

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);
}

＆＃13;

Answer 3

你可以使用这个技巧重新初始化所有风格

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

Answer 4

在第一个动画结束时，元素具有{'margin-left':'-100%', 'right': '100px'}。

元素未重置为其原始设置，因此在第二个动画开始时它仍然具有{'margin-left':'-100%', 'right': '100px'}。

最简单的解决方案是.css()和.animate()指令来解决相同的属性，例如margin-left。这样，.css()指令将充当动画的重置。

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

Answer 5

将#contentDiv替换为以下内容：

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

并将jquery替换为以下

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

试试这个：

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);
}

参考：http://jsbin.com/derofu/1/edit?html,js,output

div动画在jquery中单击时不重复

6 个答案: