jquery - jQuery - 从随机选择的列表项中删除类，保留在悬停时重新调用的能力

Question

页面上显示图像网格。将鼠标悬停在这些图像中的任何一个上都会导致“正面”和“背面”图像之间的动画过渡，有点像卡片翻转。我需要找到一种方法来随机“翻转”包含在列表中的其中一个图像，并自动循环浏览其余的列表项。翻转的图像应保留一段时间（3 秒），然后返回另一侧或默认状态。

我已经组装了一个演示，它完成了大约 80% 的工作。到目前为止，我的随机选择的列表项在加载时正确显示，但我需要在 3 秒间隔后删除“flipIt”类，然后翻转另一张卡片。到目前为止，悬停状态运行良好。看一看 ”

我尝试添加以下代码，但是一旦出现特色，它就不会将列表项返回到其原始状态：

this.hide = function(){
    while ($(".thumb").hasClass("flipIt")){
        $(this).find('.thumb-wrapper').removeClass('flipIt');
    };
};

我感谢任何指导或反馈！

Answer 1

您可以在 addClass("flipIt") 之后尝试 setTimeOut()

尝试这个：

this.show = function(){
  ran = getRan(); 
  while (ran == temp){
    ran = getRan();
  }; 
  temp = ran;   
  $("#tips li:nth-child(" + ran + ") .thumb-wrapper").addClass("flipIt");
  setTimeout(function(){
    $("#tips li:nth-child(" + ran + ") .thumb-wrapper").removeClass("flipIt");
  }, 3000);
};