如何让 jQuery 从最后一个位置动画到一个新位置？

Question

我在 Firefox 和 IE 中使用和测试了以下代码。 Firefox 完美运行（将元素移动到基于当前位置的新位置）但是 IE 失败。它总是获取原始位置，然后动画到所需位置。 Firefox 方式是我希望它工作的方式（相对于 当前位置 而不是从 原始位置 .[=13= 移动]

$("a#pack1").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '8px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "0px"}, 1000);
    });
    $("a#pack2").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '52px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-590px"}, 1000);
    });
    $("a#pack3").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '95px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-1150px"}, 1000);
    });
    $("a#pack4").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '138px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-1740px"}, 1000);
    });
    $("a#pack5").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '181px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-2397"}, 1000);
    });
    $("a#pack6").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '224px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-3064px"}, 1000);
    });
    $("a#pack7").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '268px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-3700px"}, 1000);
    });
    $("a#pack8").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '311px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-4256px"}, 1000);
    });
    $("a#pack9").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '350px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-4885px"}, 1000); //medical surveillance
    });
    $("a#pack10").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '394px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-5495px"}, 1000); //scheduler
    });
    $("a#pack11").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '438px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-6110px"},1000); //rehab reminder
    });
    $("a#pack12").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '480px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-6720px"}, 1000); //cost
    });
    $("a#pack13").click(function (){
     $('#solutions').animate({
      'background-position-x': '9px',
      'background-position-y': '525px'
     },1000,'linear');
     $('#content-data').animate({marginTop: "-7324px"}, 1000); //legal
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="solutions">
  <ul>
    <li><a id="pack1" href="javascript:void(0);">Leave</a></li>
     <li><a id="pack2" href="javascript:void(0);">Job Links</a></li>
     <li><a id="pack3" href="javascript:void(0);">Non Work Related</a></li>
     <li><a id="pack4" href="javascript:void(0);">Work Related</a></li>

     <li><a id="pack5" href="javascript:void(0);">Safety</a></li>
     <li><a id="pack6" href="javascript:void(0);">Ergonomics</a></li>
     <li><a id="pack7" href="javascript:void(0);">Industrial Hygiene</a></li>

     <li><a id="pack8" href="javascript:void(0);">Medical</a></li>
     <li><a id="pack9" href="javascript:void(0);">Medical Surveillance</a></li>
     <li><a id="pack10" href="javascript:void(0);">Scheduler</a></li>
     <li><a id="pack11" href="javascript:void(0);">Rehab Reminder</a></li>
     <li><a id="pack12" href="javascript:void(0);">Cost</a></li>
     <li><a id="pack13" href="javascript:void(0);">Legal</a></li>
   </ul>
 </div>

Answer 1

您可以通过 HTML 属性传递 background-position-x、background-position-y 和 margin-top 值并添加公共 class 来节省大量代码pack 你的链接是这样的：

<a id="pack1" class="pack" data-position-x="9px" data-position-y="8px" data-margin-top="0px" href="javascript:void(0);">Leave</a>

接下来您要做的就是为您的元素添加一些过渡效果 CSS :

#content-data{ transition: all 1s; }
#solutions{ transition: all 1s linear; }

最后概括您的 Javascript 点击处理程序以检索这些属性：

$("#solutions .pack").click(function() {
  $('#solutions').css({
    'background-position-x': $(this).attr('data-position-x'),
    'background-position-y': $(this).attr('data-position-y')
  });
  $('#content-data').css('margin-top', $(this).attr('data-margin-top'));
});

$("#solutions .pack").click(function() {
  $('#solutions').css({
    'background-position-x': $(this).attr('data-position-x'),
    'background-position-y': $(this).attr('data-position-y')
  });
  $('#content-data').css('margin-top', $(this).attr('data-margin-top'));
});

#content-data{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: all 1s;
}

#solutions{
  background-image: url(https://bennettfeely.com/gradients/img/gradient_24.png);
  background-position: 0 0;
  transition: all 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="solutions">
  <ul>
    <li><a id="pack1" class="pack" data-position-x="9px" data-position-y="8px" data-margin-top="0px" href="javascript:void(0);">Leave</a></li>
    <li><a id="pack2" class="pack" data-position-x="9px" data-position-y="52px" data-margin-top="100px" href="javascript:void(0);">Job Links</a></li>
    <li><a id="pack3" class="pack" data-position-x="9px" data-position-y="95px" data-margin-top="200px" href="javascript:void(0);">Non Work Related</a></li>
  </ul>
</div>
<div id="content-data"></div>

Answer 2

这有一种肮脏的技巧。您可以使用它的背景跨浏览器友好 p.e 为 div 设置动画。像这样，里面有一个绝对 div (#bg)：

<div id="solutions">
<div id="bg"></div>
<ul>
        <li><a id="pack1" class="test" href="javascript:void(0);">Leave</a></li>
            <li><a id="pack2" class="test" href="javascript:void(0);">Job Links</a></li>
            <li><a id="pack3" class="test" href="javascript:void(0);">Non Work Related</a></li>
            <li><a id="pack4" class="test" href="javascript:void(0);">Work Related</a></li>


    </ul>

jsfiddle

如何让 jQuery 从最后一个位置动画到一个新位置？

How do I get jQuery to animate from the last position to a new position?

javascript

jquery

position

jquery-animate