javascript - Restart transition effect using js or jquery

Question

I'm making a game that uses transitions that are similar to those in 2048. In 2048, when a player spam clicks fast, previous transitions will all end and then the new ones start.

function a(){
  //do this without any transition
  document.getElementById("di").style.width = "100px";
  //do this with transition
  document.getElementById("di").style.width = "300px";
  //goal: every click, reset the width without any transition and start again, without timeouts
}

#di {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 10s;
}

<h1 id="qwe" onclick="a()">Start</h1>

<div id="di"></div>

The comments in the function a() tell you what i want. basically, i want the rectangle to go back to 100px (instantly) and then start the transition again.

I do not want any timeouts because the real scenario is quite a bit more complicated and cant have delays

also, I know about css animations, but in the real scenario, they won't work

标签： javascriptjqueryhtmlcsscss-transitions

Answer 1

So if using jQuery,

function a()
{
   $("#di").css("width", "100px");
   $("#di").animate({width: "300px"});
}

and without transition property in CSS.