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

Posted 2023-05-08

【中文标题】如何让 jQuery 从最后一个位置动画到新位置？

【英文标题】：How do I get jQuery to animate from the last position to a new position?

【发布时间】：2018-08-01 06:12:09

【问题描述】：

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

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

【问题讨论】：

哪个版本的IE？

你真的应该考虑使用 CSS transitions 结合类而不是 jQuery animate。做你想做的事情会更干净。

@MasterYoda IE11

@Zenoo 你能帮我解决这个问题吗？我不熟悉。

好的，请给我一些时间来发布它。

【参考方案1】：

您可以通过 html 属性传递 background-position-x、background-position-y 和 margin-top 值并将公共类 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>

【讨论】：

我的意思是，我知道它应该动画（使用过渡），但它只是跳到下一个位置，它没有按预期动画。

@dihakz 它已经使用 CSS 规则 transition: all 1s 进行了动画处理，正如您在 sn-p 中看到的那样。

是的，我看到了——但我的并没有像你的那样过渡（动画）。您为我指定的 HTML/jQuery/CSS 与您在 sn-p 中的内容有什么不同吗？

更新：它可以在 IE 中运行，但现在不能在 Firefox 中运行！在 FF 中它只是直接跳到下一个位置（而你的 sn-p 没有）

@dihakz 我为您指定的代码是 sn-p 的摘要。也许尝试像在 sn-p 中那样添加background-position: 0 0。

【参考方案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