jQuery (fully) expand and (partially) collapse div on mouse hover

Question

I'm trying to implement rating functionality on my website. I have the following HTML:

<div class="rating-container">
    <div class="stars">
    </div>
</div>

The stars div gets populated with 10 fa fa-star font-awesome star icons during runtime via jQuery

My CSS looks like this:

div.rating-container div.stars {
  display: block;
}
div.rating-container div.stars i {
  font-size: 20px;
  color: white;
  cursor: pointer;
  margin-right: 3px;
  padding: 3px;
}

..And the final result looks like this:

enter image description here

What I want to do now is to only show 1 star instead of 10 when the page initially loads. Hovering over the 1 star should expand the stars div so that all 10 stars show and the user can rate - once the mouse leaves the stars div, it goes back to only showing one star. I'm trying to achieve this using jQuery's $(this).animate({ width: someWidthHere }); on the $(".stars").hover()function but I can't seem to get it right.

Any help/pointers would be greatly appreciated.

Thanks in advance!

Update: per request, here is the (silly) test code I've tried:

$(function () {
        $(".stars").hover(
            function () {
                $(this).animate({ width: '100%' });
            },
            function () {
                $(this).animate({ width: '10%' });
            }
        );
    });

Which gives me this on hover:

enter image description here

Dave Dave · Accepted Answer · 2014-10-24T02:08:29

Hopefully I understand your question correctly. You can get trigger an event for on and off like this:

$( ".stars" ).hover(
  function() {
    $( ".stars" ).animate({ width: "100px" },1000);
  }, function() {
    $( ".stars" ).animate({ width: "20px" },1000);
  }
);

Just an FYI, I think it might be better to just use css transitions and just use the .toggleClass() to expand and contract the div. It works better with some mobile browsers that have less processing power but either way works.

This is how you would do that with css:

.stars {
  width:20px;
  -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
  transition: width 1s;
}
.stars:hover{
  width:100px;
}

jQuery (fully) expand and (partially) collapse div on mouse hover

1 Answers