jquery .css() is not applying in IE9

Question

I'm trying to move some images in my web page but what happens is the code works well in chrome, Firefox and IE10. But when It comes to IE9 and earlier it won't work. Problem may be css3. But I need to move the slides in IE also. Please anyone help me by providing an alternative way.

Script:

target = (vertical) ? "translate(0," + target + ")" :  "translate(" + target + ",0)";
dur = (dur !== undefined) ? (dur/1000) + "s" : "0s";
slider.container.css({
    "transform":target ,
    "-moz-transition-duration":dur,
    "-webkit -transition-duration": dur,
    "-o-transition-duration": dur,
    "transition-duration": dur
});

Edit: HTML

 <div  id="flexslider-1" class="flex-flexslider flexslider">
 <ul class="slides"><li>  
 <div class="views-field views-field-title">   
 <span class="field-content"><a href="/oxavdDev/?q=Nicole_Zitzmann">Nicole Zitzmann</a>    </span>  </div>  
 <div class="views-field views-field-field-image">
 <div class="field-content"><a href="/oxavdDev/?q=Nicole_Zitzmann"><img typeof="foaf:Image" src="/oxavdDev/sites/default/files/styles/flexslider_thumbnail/public/Nicole%20Zitzmann.jpg?itok=-7p1j_PM" width="150" height="150" alt="" /></a></div>  </div></li>
 <li>  
 <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Melanie_Beer">Melanie Beer</a></span>  </div>  
 <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Melanie_Beer"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Melanie%20Beer.jpg?itok=2a6CrwFK" width="150" height="150" alt="Melanie Beer" title="Melanie Beer" /></a></div>  </div></li>
 <li>  
<div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Juan_Bolivar_Gonzalez">Juan Bolivar Gonzalez</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Juan_Bolivar_Gonzalez"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Juan%20Bolivar%20Gonzalez.jpg?itok=FlkwxHKX" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Alex_Caputo">Alex Caputo</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Alex_Caputo"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Alex_1.jpg?itok=RMSQMJUv" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Emma_Dixon">Emma Dixon</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Emma_Dixon"><img typeof="foaf:Image" src="default/files/styles/flexslider_thumbnail/public/Emma%20Dixon_0.jpg?itok=jQaCMqWs" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Constantina_Fotinou">Constantina Fotinou</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Constantina_Fotinou"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/ConstantinaFotinou.jpg?itok=1zs5Ozyc" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Bevin_Gangadharan">Bevin Gangadharan</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Bevin_Gangadharan"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/bevin_0.jpg?itok=DrPlXDjd" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Michelle_Hill">Michelle Hill</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Michelle_Hill"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Michelle.jpg?itok=sB91t6jb" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=JL_Kiappes">J.L. Kiappes</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=JL_Kiappes"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/JL%20Kiappes.jpg?itok=BWWk8dYA" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Abhinav_Kumar">Abhinav Kumar</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Abhinav_Kumar"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Abhinav.jpg?itok=KLnzz1L-" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Jo_Miller">Jo Miller</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Jo_Miller"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Untitled-1.jpg?itok=-SlZu5ik" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Ben_Oestringer">Ben Oestringer</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Ben_Oestringer"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/default_images/download.jpg?itok=e9dEkn3I" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Pietro_Roversi">Pietro Roversi</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Pietro_Roversi"><img typeof="foaf:Image" src="/sites/default/files/styles/flexslider_thumbnail/public/pietro.jpg?itok=I1BIVIRl" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Andrew">Andrew Sayce</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Andrew"><img typeof="foaf:Image" src="/sites/default/files/styles/flexslider_thumbnail/public/AndrewSayce1.jpg?itok=D-5ByU9B" width="150" height="150" alt="" title="Andrew Sayce" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Simon_Spiro">Simon Spiro</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Simon_Spiro"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Simon.jpg?itok=SBK4e1n1" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Steve_Woodhouse">Steve Woodhouse</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Steve_Woodhouse"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Steve%20Woodhouse.jpg?itok=MPYu6ILP" width="150" height="150" alt="" /></a></div>  </div></li>
</ul></div>

Answer 1

IE9 doesn't support css transitions.

use jQuery .animate() instead:

$('#element_id').animate({
    top: target + 'px'
}, dur);

just make sure #element_id has position:absolute (or relative) in css.

hope that helps.

Answer 2

I would use Modernizr to detect when css animations are not supported. With Modernizr, it's as simple as:

if(!Modernizr.cssanimations) {
    //jQuery fallback 
}

As for rotating with jQuery I would use: https://code.google.com/p/jqueryrotate/