JQuery-based announcement infinite loop rolling implementation code _ jquery

Today, I saw a small effect on the bulletin board of a website, if there are 2 announcements or more there is a rolling effect, specially organized to share with you online demonstration: http://demo.jb51.net/js/2012/callboard/
JQuery code

The Code is as follows:

// Version 2: Newton Transformation
(Function (win ){
Var callboarTimer;
Var callboard =$ ('# callboard ');
Var callboardUl = callboard. find ('ul ');
Var callboardLi = callboard. find ('lil ');
Var liLen = callboard. find ('lil'). length;
Var initHeight = callboardLi. first (). outerHeight (true );
Win. autoAnimation = function (){
If (liLen <= 1) return;
Var self = arguments. callee;
Var callboardLiFirst = callboard. find ('lil'). first ();
CallboardLiFirst. animate ({
MarginTop:-initHeight
},500, function (){
ClearTimeout (callboarTimer );
CallboardLiFirst.appendTo(callboardUl).css ({marginTop: 0 });
CallboarTimer = setTimeout (self, 5000 );
});
}
Callboard. mouseenter (
Function (){
ClearTimeout (callboarTimer );
}). Mouseleave (function (){
CallboarTimer = setTimeout (win. autoAnimation, 5000 );
});
} (Window ));
SetTimeout (window. autoAnimation, 5000 );

HTML code:

The Code is as follows:

• 
  Announcement: the topic of the front-end group is being organized. If you need to use it, leave a message to facilitate timely notification!
  


• 
  Announcement: the front-end group is available for one month and eight days, PR is upgraded to 3, BD weight is 1
  

CSS Code: (you can set it as needed)

The Code is as follows:

# Callboard {height: 24px; line-height: 24px; overflow: hidden ;}
# Callboard ul {padding: 0 ;}
# Callboard li {padding: 0 ;}

Complete DEMO code:

The Code is as follows:

Rolling announcement board