Based on jquery imitation Sohu debate voting animation code. This is a character of the cartoon villain Square opposition debate voting effect code. As follows:
Online preview Source Download
The implemented code.
HTML code:
<Scripttype= "Text/javascript">$ (document). Ready (function () { vara= -; varb= the; $("#white"). Animate ({width:0, left:"250px" }, +, function () { $("#vs"). FadeIn ("Slow", function () { $("#all"). html (a+b); $("#aa"). HTML (a); $("#bb"). html (b); varNewleft=a/(A+b)* - - - + "px"; //20 is half of vs $("#vs"). Animate ({left:newleft}, +); $("#red"). Animate ({width:newleft}, +); }); }); }); </Script> <DivID= "BOX_BG"> <DivID= "Container"> <DivID= "Green"class= "line"></Div> <DivID= "Red"class= "line"></Div> <DivID= "White"class= "line"></Div> <DivID= "vs"></Div> </Div> </Div> <Divstyle= "width:440px; margin:0px auto;"> <DivID= "Aa2"class= "Scope">Square<spanID= "AA"></span>Ticket</Div> <DivID= "Bb2"class= "Scope">Anti-communist<spanID= "BB"></span>Ticket</Div> <DivID= "All2"class= "Scope">Total<spanID= "All"></span>Ticket</Div> </Div>
Via:http://www.w2bc.com/article/2015-12-27-jquery-vote
Mock Sohu debate voting animation code based on jquery