Question

我在表中有一个div，它是空的，可以说category-1，但是javascript函数将图像附加到该div，遍历数组，还有一个div，当缩放发生时显示文本内容让说box-1，最初隐藏box-1。

这里我要做的是当数组到达最后一个元素时，包含图像的div缩放到中心（具有密切效果）并且div1隐藏，同时隐藏box-1将在3秒的延迟时间后放大（开启效果）我想关闭box-1并同时打开category-1并使用放大样式（开放式）。

但我无法达到效果。

HTML：

<table class="screen_display">
    <tr>
      <td>
         <div id="category-1"></div>
          <div class="box-1" id="flip-1">
            <div class="trend">Trending</div>
            <div class="trend">Footwear</div>
            <marquee scrollamount="38">
               <strong><h1>Reebok</h1></strong>
            </marquee>
          </div>
       </td>
    </tr>
</table>

的CSS：

.opensesame {  
        width: 100%;
        height: 100%;
        /*background: #FAC8B6;*/
        -webkit-transition: transform 0.3s;
        transform:scaleX(1);
        animation-name: open;
        animation-duration: 0.3s;    
    }

@keyframes open {
        25%  {transform:scaleX(0.25);}
        50%  {transform:scaleX(0.50);}
        75%  {transform:scaleX(0.75);}
        100% {transform:scaleX(1);}
    }

.closesesame {  
        width: 100%;
        height: 100%;
        /*background: #FAC8B6;*/
        -webkit-transition: transform 0.5s;
        transform:scaleX(1);
        animation-name: close;
        animation-duration: 0.5s;    
    }

@keyframes close {
        0% {transform:scaleX(1);}
        25%  {transform:scaleX(0.75);}
        50%  {transform:scaleX(0.50);}
        75%  {transform:scaleX(0.25);}
        100% {transform:scaleX(0);}        
    }

JS：

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

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) {            
        flip1();
    }
  }, timeout);
}
startSlidecat1();

function flip1(){    
   $('#category-1').css('display', 'none');    
   $('.box-1').delay(100).css('display', 'block');
   //$('#category-1').delay(100).addClass("closeover"); 
   $('.box-1').addClass("opensesame");  
   setTimeout(closeIt, delay_time);        
}

function closeIt(){
    $('.box-1').addClass("closesesame");     
    setTimeout(startSlidecat1, 400);     
}

简单来说，当数组元素到达最后一项时，类别应平滑缩小并隐藏，平滑地放大box-1，3秒后延迟box-1慢慢缩小并隐藏，平滑地放大box-1。我怎么能这样做？

来自css的JQuery扩展和缩小效果不起作用

0 个答案: