Animate Ratings

Building on the Quick Start example, you can change the animation of the icons when they are clicked using the animation option. The following animation options are available for the widget:

blind
bounce
clip
drop
explode
fade
fold

highlight
puff
pulsate
scale
shake
size
slide

For more information about Wijmo animations, please see Animation.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which causes the stars to slide off to the left when you click to rate, and slide back in with the rated value.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $('#ratingRadio').wijrating({ animation: { animated: "slide", easing: "linear", duration: 500, delay: 250 } }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
     $(document).ready(function () {
         $('#ratingRadio').wijrating({
            animation: {
                animated: "slide",
                easing: "linear",
                duration: 500,
                delay: 250
            }
         });
     });             
    </script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the rating.
Save your HTML file and open it in a browser. The rating appears like the one in the live widget below. Click a star to see the animation.

Widgets

Reference

Concepts