Question

我正在尝试使用jquery在悬停时对li元素进行动画处理。我希望li元素首先更改其尺寸（为此使用CSS过渡），然后更改其文本。但是，将其写入悬停功能会同时执行，因此甚至在元素展开之前也会出现较大的文本。

我已经尝试过使用callback（），但是它不起作用，文本永远不会改变。我也尝试过使用settimeout（）函数，它似乎可以正常工作，除非当我们快速将鼠标悬停在元素上并将光标从元素上移开时，在这种情况下，它仍然会更改文本。

JS：

$(".dl").hover(function() {
  $(this).data('defaultText', $(this).text());
  $(this).css({
    "width": "320px",
    "height": "70px",
    "background-color": "aliceblue"
  });
  let that = this;
  $(that).text("New Testing Text As a replacement").fadeIn(1000);
}, function() {
  $(this).css({
    "width": "160px",
    "height": "30px",
    "background-color": "rgb(237, 199, 183)"
  });
  $(this).text($(this).data('defaultText'));
});

HTML

<ul class="devices-list">
  <li class="dl">Device one</li>
  <li class="dl">Device two</li>
  <li class="dl">Device three</li>
</ul>

css

.dl {
  width: 160px;
  height: 30px;
  text-align: center;
  background-color: rgb(237, 199, 183);
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 80px;
  padding-top: 4px;
  transition: width 0.6s, height 0.6s, background-color 0.6s;
  transition-timing-function: ease;
}

JSFiddle

Answer 1

请尝试以下代码。

forEach

仅在上一个动画完成后才执行一行

1 个答案: