0

我正在进行的一个项目对我使用 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。

4

1 回答 1

1

我猜你想要像这个演示这样的东西？

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

适用于 1.3.2

于 2013-05-17T11:56:15.027 回答