我在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>
答案 0 :(得分：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>
答案 1 :(得分：1)
这有一种肮脏的黑客行为。 您可以使用它的背景crossbrowserfriendly 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>