CSS3 Animated Star Rating Plugin For jQuery - voteStar.js

A simple, animated jQuery star rating jQuery plugin which uses CSS3 transitions to smoothly update the rating control on click.

How to use it:

1. Add references to jQuery library and the jQuery voteStar.js plugin's files:

<link rel="stylesheet" href="dist/voteStar.css">
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="dist/jquery.voteStar.js"></script>

2. Create an inline element for the star rating control and specify the initial value using data-starnum attribute:

<span class="event_star star_in" data-starnum="0"><i></i></span>

3. Initialize the star rating control and output the selected rating value.

$('.event_star').voteStar({
  callback: function(starObj, starNum){
    alert('You Just Clicked Rating Object #'+(starObj.index('span')+1)+', Rating Value:'+starNum)
  }
})  

4. Change the size of the star rating control.

<!-- Large -->
<span class="event_star star_big" data-starnum="0"><i></i></span>
<!-- Small -->
<span class="event_star star_small" data-starnum="0"><i></i></span> 

5. More configuration options to customize the star rating control.

$('.event_star').voteStar({

  // highlight stars on mouse move
  moveStar: true, 

  // precise stars
  precise: false,

  // enable animation
  starAnimate: true,
  
})  

---

This awesome jQuery plugin is developed by wuuashen. For more Advanced Usages, please check the demo page or visit the official website.