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

Question

我正在进行的一个元素对我使用 CSS3(如下)开发的现代代码很满意，但希望在两个旧版浏览器 IE8(在我客户的办公室中使用)和 IE9 上获得相同的效果。我试过使用 jQuery .animate 函数(下面的示例)，但我想知道我是否做错了什么 - jQuery 不是我通常使用的东西!我也知道他们要求它与 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。

Answer 1

我猜你想要类似 THIS DEMO 的东西？

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

适用于 1.3.2