jQuery（完全）扩展和（部分）鼠标悬停时崩溃div

Question

我正在尝试在我的网站上实施评分功能。 我有以下HTML：

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

stars div在运行时通过fa fa-star

填充10个jQuery字体真棒星形图标

我的CSS看起来像这样：

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;
}

..最终结果如下：

我现在要做的是在页面最初加载时仅显示1颗星而不是10颗星。将鼠标悬停在1颗恒星上会扩展stars div，以便显示所有10颗星并且用户可以进行评分 - 一旦鼠标离开stars div，它就会返回仅显示一颗星。我正试图在jQuery函数上使用$(this).animate({ width: someWidthHere });的{​​{1}}来实现此目的，但我似乎无法做到正确。

非常感谢任何帮助/指示。

提前致谢！

更新：根据请求，这是我尝试过的（愚蠢）测试代码：

$(".stars").hover()

在悬停时我给了我这个：

Answer 1

希望我能正确理解你的问题。你可以像这样触发一个开启和关闭的事件：

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

仅仅是一个FYI，我认为仅使用css转换并使用.toggleClass（）扩展和收缩div可能会更好。对于一些处理能力较低的移动浏览器，它可以更好地工作。

这就是你用css做的事情：

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