当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Slide in and slideout using css3 and jquery animation

问题描述:

I am using css3 animation to slide down a div to a list having few set of divs. I am trying to achieve a slide in and slide out effect like vertical news ticker in this site

http://buildinternet.s3.amazonaws.com/projects/totem/index.html

Css

.slidein{ animation:slide 1799ms linear; top:0px; -webkit-animation:slide 1799ms linear;}

@keyframes slide

{

0%{ top:-100px;}

100%{ top:0px;}

}

@-webkit-keyframes slide

{

0%{ top:-100px;}

100%{ top:0px;}

}

Jquery

 $(".parentDiv").prepend('<div class="newdiv slidein"></div>').children().slice(5);

}

For Slide down i tried to use the follwing div to move it up and down using top and bottom values

$(".existingDivs").css({"bottom":""});

$(".existingDivs").css({"bottom":"90px"});

$(".existingDivs").animate({

top: '+=92'

},2000);

But it is not working in chrome and partially works in firefox. Is there a way to append smooth sliding effect like vertical ticker.

网友答案:

I would remove slide from the CSS value. The browser will transition between the values you specify, which will be a slide anyway.

Why do you use jQuery to animate a different way? Why not use CSS3 transitions to then slide out?

分享给朋友:
您可能感兴趣的文章:
随机阅读: