Div动画不重复点击在jquery

div animation not repeating on click in jquery

本文关键字：jquery 动画 Div      更新时间：2023-09-26

我试图动画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);
}

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

只需在代码中将margin-left更改为right:

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>

你可以使用这个技巧来重新初始化所有的style 

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

在第一个动画的末尾元素有{'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'));

将#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'
        });
   })

试试这个:

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、输出

相关文章：