Question

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

我已经组装了一个demo，它完成了大约80％。到目前为止，我有随机选择的列表项正确显示onload，但我需要在3秒间隔后删除“flipIt”类，之后翻转另一张卡。到目前为止，悬停状态正常运行。 Have a look »

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

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

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

1 个答案: