使用jQuery复制CSS3滑动内容转换

我参与的一个项目对我使用CSS3（如下）开发的现代代码感到满意，但希望在两种传统浏览器IE8（在我客户的办公室中使用）和IE9中获得相同的效果。我尝试过使用jQuery.animate函数（下面的一个例子），但我想知道我是否做错了什么-jQuery不是我通常使用的东西！我还知道，他们需要它与jQuery 1.3.2配合使用，而jQuery 1.3.2正是他们网站的其他部分所使用的，因为他们在jQuery的更现代的部分破坏页面上的其他功能时遇到了问题

这是CSS

#sliderOne .content,#sliderOne .image{position:absolute;top:0;left:180px;-webkit-transition:all .8s;-o-transition:all .8s;transition:all, .8s;-moz-transition:all .8s ease-in}
#sliderOne:hover .image{position:absolute;left:0}
#sliderThree .content,#sliderThree .image{position:absolute;top:180px;left:180px;-webkit-transition:all, .8s;-moz-transition:all .8s ease-in;-o-transition:all, .8s;transition:all, .8s}
#sliderFour .sliderTitle{position:absolute;top:0;left:0}
#sliderFour .content,#sliderFour .image{position:absolute;top:0;left:0;-webkit-transition:all, .8s;-moz-transition:all .8s ease-in;-o-transition:all, .8s;transition:all, .8s}
#sliderFive .sliderTitle{position:absolute;top:0;left:180px}
#sliderFive .content,#sliderFive .image{position:absolute;top:0;left:180px;-webkit-transition:all, .8s;-moz-transition:all .8s ease-in;-o-transition:all, .8s;transition:all, .8s}
.sliderTitle .right{text-align:right}
.sliderTitle p.number{font-size:6em}
.sliderTitle p.number,#sliderContainer h3,#sliderContainer h4{font-family:cursive}
#sliderContainer .content p,#sliderContainer .content h4{padding:1em}
#sliderOne,#sliderThree,#sliderFive,#sliderOne .content,#sliderThree .content,#sliderFive .content{float:left}
#sliderOne:hover .content,#sliderThree .sliderTitle{position:absolute;top:180px;left:180px}
#sliderTwo .sliderTitle,#sliderSix .sliderTitle{position:absolute;top:180px;left:0}
#sliderTwo .content,#sliderTwo .image,#sliderSix .content,#sliderSix .image{position:absolute;top:180px;left:0;-webkit-transition:all, .8s;-moz-transition:all .8s ease-in;-o-transition:all, .8s;transition:all, .8s}

下面是我尝试过的jQuery的一个示例：

    $('#sliderTwo').hover(function() {
  $('#sliderTwo .image').animate({top:'=-180px'},600);
});

---

如果需要的话，我也可以提供一些HTML。

我猜你想要类似的东西吗

---

适用于1.3.2

请使您的CSS可读，并清楚地解释您试图实现的动画效果

$('#sliderTwo').mouseenter(function() {
  $('#sliderTwo .image').stop().animate({top:'0px'},600);
}).mouseleave(function() {
  $('#sliderTwo .image').stop().animate({top:'180px'},600);
});