Use jQuery to simulate Sohu debate vote animation code (with source code download) and jquery source code download

Source: Internet
Author: User

Use jQuery to simulate Sohu debate vote animation code (with source code download) and jquery source code download

Based on jQuery, the code is used to simulate the voting animation code of Sohu's debate. It is a personalized cartoon villain's code for voting special effects. The animation effects are smooth and natural. Excellent user experience. The source code is compatible with the latest mainstream browsers.

Download demo source code

Html code:

<Script type = "text/javascript"> $ (document ). ready (function () {var a = 500; var B = 130; $ ("# white "). animate ({width: 0, left: "250px"}, 1000, function () {$ ("# "). fadeIn ("slow", function () {$ ("# all" ).html (a + B); $ ("# aa" ).html (); $ ("# bb" 2.16.html (B); var newLeft = a/(a + B) * 500-20 + "px "; // 20 is half of vs $ ("# "). animate ({left: newLeft}, 1000); $ ("# red "). animate ({width: newLeft}, 1000 );});});}); </script> <div id = "box_bg"> <div id = "container"> <div id = "green" class = "line"> </div> <div id = "red" class = "line"> </div> <div id = "white" class = "line"> </div> <div id = "vs"> </div> <div style = "width: pixel PX; margin: 0px auto; "> <div id =" aa2 "class =" scope "> <span id =" aa "> </span> </div> <div id =" bb2" class = "scope"> total <span id = "bb"> </span> tickets </div> <div id = "all2" class = "scope"> <span id = "all"> </span> ticket </div>

The above code is based on jQuery to implement an animation code similar to the Sohu debate vote. I hope it will help you!

Articles you may be interested in:
  • Code Implementation Based on Jquery and WebMethod Voting
  • JQuery-based voting system display result plug-in
  • Jquery-based multi-color percentage dynamic progress bar voting effect display result implementation code
  • PHP and jQuery realize special effects of red-blue Voting
  • JQuery uses ajax to implement the Code to vote for a new bar chart without any animation effect
  • Red-Blue (top-step) Voting code based on PHP + jQuery + MySql
  • Simple Example of jquery color voting progress bar

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.