div在无限循环jquery中只翻转一次答案

【问题标题】：div flips only one time in infinite loop jquerydiv在无限循环jquery中只翻转一次
【发布时间】：2015-06-25 03:43:16
【问题描述】：

我在表中有一个 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);
  }

【问题讨论】：

if (last){flip();} 这真的需要吗？
@Arvind yes.... 如果标志设置为最后一个元素，则调用函数。

标签： javascript jquery css css-transitions

【解决方案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);
  }
};

【讨论】：

我要转360度，远离这个问题