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

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

1 个答案: