I have the following code used and tested in both Firefox and IE. Firefox works perfectly (move an element to a new location based on the current location) however IE fails. It always takes the original location and then animates to the desired location. The Firefox way is how I'd like it to work (move relative to the current location and not from the original location.
$("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>You can save quite a bit of code by passing the background-position-x, background-position-y and margin-top values through HTML attributes and adding a common class pack to your links like this :
<a id="pack1" class="pack" data-position-x="9px" data-position-y="8px" data-margin-top="0px" href="javascript:void(0);">Leave</a>
All you have to do next is add some transitions to your elements' CSS :
#content-data{ transition: all 1s; }
#solutions{ transition: all 1s linear; }
And finally generalize your Javascript click handler to retrieve those attributes :
$("#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>