javascript - div在无限循环jquery中只翻转一次

Question

我在表中有一个 div 元素，我在 JS 中旋转 div 并重复调用该函数，但是翻转仅在第一次执行函数时发生，而在调用函数时再次发生它只显示 div , 无需翻转 div。

我需要的是，当我每次调用该函数时，div 应该翻转 div。

我该怎么做？

CSS:

.box-1{
    transform: rotateY(180deg);
    display:none;
}

JQuery:

function startSlidecat1(started) {
  for (var i = 0; i < footwear.length; i++) {
    var image = footwear[i][0];
    imgslidercat1(image, i * 2100, i == footwear.length - 1);
  }
};

function imgslidercat1(image, timeout, last) {
  window.setTimeout(function() {
    document.getElementById('flip-1').style.display = 'none';
    document.getElementById('category-1').style.display = 'block';
    document.getElementById('category-1').innerHTML = "";
    var product = document.getElementById('category-1');
    var elem = document.createElement("img");
    product.appendChild(elem);
    elem.src = image;
    if (last) {
      flip();
    }
  }, timeout);
}
startSlidecat1();

function flip(){
    $('#category-1').delay(100).css('display', 'none');
    $('.box-1').delay(100).css('display', 'block');
    $('.box-1').transition({
        perspective: '100px',
        rotateY: '360deg'
      },200)  
    setTimeout(startSlidecat1, 2000);
  }

Answer 1

div第一次翻转时，其rotateY值由180deg变为360deg，可见。但是从第二次开始，它的值保持在 360deg 所以没有任何反应。你只需要在每次这样调用函数时重新设置值，

$('.box-1').css({transform:'perspective(100px) rotateY(180deg)'});

您可以像这样将其包含在 startSlidecat1 函数中，

function startSlidecat1(started) {
  $('.box-1').css({transform:'perspective(100px) rotateY(180deg)'});
  for (var i = 0; i < footwear.length; i++) {
    var image = footwear[i][0];
    imgslidercat1(image, i * 2100, i == footwear.length - 1);
  }
};