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

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

1 个答案: