每15秒复制div并为其添加动画

时间：2017-01-10 23:24:04

标签： jquery html css

我有一个选框，我想重复它，但是第一次运行动画时它只运行一次，因为我希望它从中间开始，然后我想复制那个包装器，所有的内容，然后应用一个新动画，我想每15秒克隆一次，使其重复作为一个选框

setTimeout( function(){ 
  $('.wrapper').clone().addClass('wrapper2').insertAfter('.marquee');
        
        $('.wrapper2').css('-webkit-animation','second 30s infinite linear');
        $('.wrapper2').css('-moz-animation','second 30s infinite linear');
        $('.wrapper2').css('-o-animation','second 30s infinite linear');
        $('.wrapper2').css('animation','second 30s infinite linear');
        
    }  , 15000 );
    @-webkit-keyframes scroll{
        0%{-webkit-transform: translate(-24%,0);}
        100%{-webkit-transform: translate(-100%,0);}
    }

    // Second animation to add to the clone wrapper every 15 seconds
    @-webkit-keyframes second{
       0%{-webkit-transform: translate(0,0);}
       100%{-webkit-transform: translate(-100%,0);}
    }

    .wrapper{
       display: inline-block;
       padding-left: 100%;
       -webkit-animation:scroll 25s 1 linear;
       -moz-animation:scroll 25s 1 linear;
       -o-animation:scroll 25s 1 linear;
       animation:scroll 25s 1 linear;
       background-color: brown;
       height: 50px;
       width: 50px;
    }      
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="marquee">
        <div class="wrapper">
            <!-- <div class="date"></div>-->
            <div class="pueblatemp"></div>
            <div class="warlotemp"></div>
            <div class="difference"></div>
            <div class="time"></div>
        </div>
    </div>

3 个答案:

答案 0 :(得分：0)

如果你想让动画无限运行那么你就不需要jQuery来实现这一点。您可以使用 animation-iteration-count 来使用纯CSS，如下面的代码。

  

请注意，容器中会出现空白区域   大帐篷的移动。这可以使用jQuery解决。

＆＃13;
＆＃13; 
@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translate(-24%, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
  }
}
// Second animation to add to the clone wrapper every 15 seconds
@-webkit-keyframes second {
  0% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
  }
}
.wrapper {
  display: inline-block;
  padding-left: 100%;
  -webkit-animation: scroll 25s 1 linear;
  -moz-animation: scroll 25s 1 linear;
  -o-animation: scroll 25s 1 linear;
  animation: scroll 25s 1 linear;
  background-color: brown;
  animation-iteration-count: infinite; /* Infinite loop (you can also set any number of iteriations that you want*/
  height: 50px;
  width: 50px;
}
＆＃13; 
<div class="marquee">
  <div class="wrapper">
    <!-- <div class="date"></div>-->
    <div class="pueblatemp"></div>
    <div class="warlotemp"></div>
    <div class="difference"></div>
    <div class="time"></div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

此外，如果您不需要支持＆lt;，则不需要使用供应商前缀（-webkit，-moz和-o）。 IE10因为所有主流浏览器都支持animation属性。

答案 1 :(得分：-1)

我认为这可以为你解决;）

我减少了间隔，因此更容易想象。

setInterval( function(){ 
  $('.marquee').append($('.wrapper').first().clone().addClass('wrapper2').removeClass('wrapper1'));
  
}, 1000 );
@-webkit-keyframes scroll{
        0%{-webkit-transform: translate(-24%,0);}
        100%{-webkit-transform: translate(-100%,0);}
    }

    @-webkit-keyframes second{
       0%{-webkit-transform: translate(-24%,0);}
       100%{-webkit-transform: translate(-100%,0);}
    }

    .wrapper{
       display: inline-block;
       padding-left: 100%;
       background-color: brown;
       height: 50px;
       width: 50px;
    }
    .wrapper1{
      -webkit-animation:scroll 25s 1 linear;
      -moz-animation:scroll 25s 1 linear;
      -o-animation:scroll 25s 1 linear;
      animation:scroll 25s 1 linear;
     }
    .wrapper2{
      -webkit-animation: second 30s infinite linear;
      -moz-animation: second 30s infinite linear;
      -o-animation: second 30s infinite linear;
      animation: second 30s infinite linear;
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="marquee">
        <div class="wrapper wrapper1">
            <!-- <div class="date"></div>-->
            <div class="pueblatemp"></div>
            <div class="warlotemp"></div>
            <div class="difference"></div>
            <div class="time"></div>
        </div>
    </div>

克隆元素时一定要小心，确保只克隆其中一个元素。

见：

setInterval( function(){ 
  $('.hey').append($('.rotating').clone());
  
}, 1000 );
@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.rotating {
    width: 14px;
    height: 14px;
    background-color: black;
    margin: 5px;
    display: inline-block;
    -webkit-animation: rotating 2s linear infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hey">
  <div class='rotating'></div>
</div>

答案 2 :(得分：-1)

首先，如果您想要重复发生的事件，则应使用setInterval()而不是超时。 （setTimeout只运行一次）。

我减少了间隔，因此更容易想象。您应该使用父级的append而不是insertAfter（在您的示例中，在选取框外部生成新的包装器元素）。我还将一些代码从你的jquery转移到一个新的css类

如果您希望动画与原始动画显示在同一位置，请更改第一个关键帧上的x位置。 translate(-24%,0) vs translate(0,0) 

setInterval( function(){
  $('.marquee').append($('.wrapper').first().clone().addClass('wrapper2').removeClass('wrapper1'));
}, 1000 );
@-webkit-keyframes scroll{
    0%{-webkit-transform: translate(-24%,0);}
    100%{-webkit-transform: translate(-100%,0);}
}

@-webkit-keyframes second{
   0%{-webkit-transform: translate(0,0);}
   100%{-webkit-transform: translate(-100%,0);}
}

.wrapper{
   display: inline-block;
   padding-left: 100%;
   background-color: brown;
   height: 50px;
   width: 50px;
}
.wrapper1{
  -webkit-animation:scroll 25s 1 linear;
  -moz-animation:scroll 25s 1 linear;
  -o-animation:scroll 25s 1 linear;
  animation:scroll 25s 1 linear;
}
.wrapper2{
  -webkit-animation: second 30s infinite linear;
  -moz-animation: second 30s infinite linear;
  -o-animation: second 30s infinite linear;
  animation: second 30s infinite linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee">
    <div class="wrapper wrapper1">
        <div class="pueblatemp"></div>
        <div class="warlotemp"></div>
        <div class="difference"></div>
        <div class="time"></div>
    </div>
</div>

相关问题
最新问题