Im using jquery cycle for the slideshow. i want to be able to have the numbers stop and then roll whenever the next slide comes. so is almost there i have the numbers rolling in a infinite sequence so it only fades in and out within the slideshow. but i actually want to trigger the css animation with jquery so when the next slide comes the numbers starts rolling and then stop at the number i want. im trying to make my self as clear as possible. any questions are welcome. thanks! http://jsfiddle.net/QGRv9/235/
I LEAVE MY CSS ANIMATION here. the jquery and html is in the fiddle.
#wrapper_founded #date_anim span#first_num {
-moz-animation:first_num 6s infinite ease-in-out;
-webkit-animation:first_num 6s infinite ease-in-out;
animation:first_num 6s infinite ease-in-out;
}
@-moz-keyframes first_num {
60% {
top:-61px;
}
80% {
top:-61px;
}
95% {
top:0;
}
100% {
top:0;
}
}
@-webkit-keyframes first_num {
60% {
top:-61px;
}
80% {
top:-61px;
}
95% {
top:0;
}
100% {
top:0;
}
}
@keyframes first_num {
60% {
top:-61px;
}
80% {
top:-61px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#wrapper_founded #date_anim span#second_num {
-moz-animation:second_num 6s infinite ease-in-out;
-webkit-animation:second_num 6s infinite ease-in-out;
animation:second_num 6s infinite ease-in-out;
}
@-moz-keyframes second_num {
60% {
top:-250px;
}
80% {
top:-250px;
}
95% {
top:0;
}
100% {
top:0;
}
}
@-webkit-keyframes second_num {
60% {
top:-250px;
}
80% {
top:-250px;
}
95% {
top:0;
}
100% {
top:0;
}
}
@keyframes second_num {
60% {
top:-250px;
}
80% {
top:-250px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#wrapper_founded #date_anim span#third_num {
top:-381px;
-moz-animation:third_num 6s infinite ease-in-out;
-webkit-animation:third_num 6s infinite ease-in-out;
animation:third_num 6s infinite ease-in-out;
}
@-moz-keyframes third_num {
60% {
top:3px;
}
80% {
top:3px;
}
95% {
top:-381px;
}
100% {
top:-381px;
}
}
@-webkit-keyframes third_num {
60% {
top:3px;
}
80% {
top:3px;
}
95% {
top:-381px;
}
100% {
top:-381px;
}
}
@keyframes third_num {
60% {
top:3px;
}
85% {
top:3px;
}
95% {
top:-381px;
}
100% {
top:-381px;
}
}
#wrapper_founded #date_anim span#fourth_num {
-moz-animation:fourth_num 6s infinite ease-in-out;
-webkit-animation:fourth_num 6s infinite ease-in-out;
animation:fourth_num 6s infinite ease-in-out;
}
@-moz-keyframes fourth_num {
60% {
top:-377px;
}
80% {
top:-377px;
}
95% {
top:0;
}
100% {
top:0;
}
}
@-webkit-keyframes fourth_num {
60% {
top:-377px;
}
80% {
top:-377px;
}
95% {
top:0;
}
100% {
top:0;
}
}
@keyframes fourth_num {
60% {
top:-377px;
}
80% {
top:-377px;
}
95% {
top:0;
}
100% {
top:0;
}
}
Why don't you try Cycle2? I think it's better to do that, bro...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.