Replicate CSS3 sliding content transitions with jQuery

微信扫一扫,分享到朋友圈

Replicate CSS3 sliding content transitions with jQuery

A project I’m on is happy with the modern code I’ve developed using CSS3
(below) but want the same effect across two legacy browsers, IE8 (used in my client’s office) and IE9. I’ve tried using the jQuery .animate function (an example below) but I’m wondering whether I’m doing something wrong – jQuery isn’t something I normally use! I also know they require it to work with jQuery 1.3.2, which is what’s used on the rest of their site, as they’ve had issues with more modern bits of jQuery breaking other functionality on the pages.

Here is the 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}

And here’s an example of the jQuery I’ve tried:

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

I can provide some of the HTML as well if necessary.

Problem courtesy of: user2212290

微信扫一扫,分享到朋友圈

Replicate CSS3 sliding content transitions with jQuery

稳了 Surface Pro 6售价可能799美元起

上一篇

Things we are excited to see in Mate 20 launch in October

下一篇

你也可能喜欢

Replicate CSS3 sliding content transitions with jQuery

长按储存图像,分享给朋友