jQuery 按钮在悬停时调整大小

Question

我正在尝试编写一个在悬停时调整其宽度的按钮。

初始状态： - 播放标志作为背景（位置中心中心）

状态悬停： - 游戏应该向左（位置左中） - 它有效！ - 一些标题出现在调整大小区域的中心（我在这里使用不透明度）

这仅使用 CSS - 过渡功能。

当我将鼠标光标从按钮移出的那一刻，一切都很好，即背景（播放标志）立即转到中心位置。

我想在动画结束后而不是一开始就这样做。

这是我的代码

HTML：

<article class="buttons clearfix">
    <div id="play"><a href="#" class="hide">Click</a></div>
</article>

CSS：

   .buttons #play {
    float: left;
    margin-right: 20px;
    width: 50px;
    height: 50px;
    cursor: pointer; }
   buttons #play:hover {
      outline: 1px solid #84bd21; }

  .buttons #play {
    background: #019c43 url(http://i57.tinypic.com/ji10l3.png) no-repeat center center;
    text-align: center;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out; }

    .buttons #play:hover {
      width: 200px;
      background: #019c43 url(http://i57.tinypic.com/ji10l3.png) no-repeat left center; }

    .buttons #play a {
        text-decoration: none;
      font-size: 1.4em;
      display: block;
      line-height: 50px;
      color: #fff;
      opacity: 0;
      -webkit-transition: opacity 0.3s linear;
      -moz-transition: opacity 0.3s linear;
      -ms-transition: opacity 0.3s linear;
      transition: opacity 0.3s linear; }
      .buttons #play a:hover {
        opacity: 1; }

http://jsfiddle.net/k3p0n66b/57

我也使用 jQuery 方法悬停、动画、延迟，但效果（也使用回调函数）类似，鼠标离开时背景立即转到中心位置。

你知道哪里错了吗？

Answer 1

我将箭头更改为固定在左侧（注意背景规则中的 10px）。

.buttons #play {
background: #019c43 url(http://i57.tinypic.com/ji10l3.png) no-repeat 10px center;
text-align: center;
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out; }

示例： http://jsfiddle.net/k3p0n66b/59/

Answer 2

我删除了重复的背景规则（来自:hover 的那个），而不是center center 我放了10px center：

background: #019c43 url(http://i57.tinypic.com/ji10l3.png) no-repeat 10px center;

演示：

.buttons #play {
    float: left;
    margin-right: 20px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
buttons #play:hover {
    outline: 1px solid #84bd21;
}
.buttons #play {
    background: #019c43 url(http://i57.tinypic.com/ji10l3.png) no-repeat 10px center;
    text-align: center;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}
.buttons #play:hover {
    width: 200px;
}
.buttons #play a {
    text-decoration: none;
    font-size: 1.4em;
    display: block;
    line-height: 50px;
    color: #fff;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -ms-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
.buttons #play a:hover {
    opacity: 1;
}

<article class="buttons clearfix">
    <div id="play"><a href="#" class="hide">Click</a>
    </div>
</article>