Question

我正在构建jquery动画，其中包含四个名为ani1（），ani2（）ani3（）和ani4（）的函数。现在，我对处理响应性时的外观感到困惑。目前，我的jquery代码正常运行。所有功能都是逐个运行的，并且在桌面上看起来也很好。但我不知道如何处理移动设备。所以，我想要我创建的相同动画的css代码。

我的HTML如下：

<img class="1st" src="img/imgpsh_fullsize.png" style="width:100%; height:100%;">

<div id="animate1" style="bottom:16.5em;left:33.5em;display:none;">
<img class=" boy" src="img/finger.png" style="" />
</div>  

<div class="2nd" style=" position:absolute; bottom:0;     left:25em;display:none;">
<img class="remote" src="img/remote.png">
</div>

<div class="3rd" style="position:absolute; bottom:0; left:20em;display:none;">
<img class="hand" src="img/hand1.png">
</div>

<div class="4th" style="position:absolute;bottom:0;left:5em;display:none;">
<img class="ie" src="img/ielogo.png">
</div>

jquery如下：

    function ani1(){$("#animate1").fadeIn().animate({'display':'inline-block'},1000,function(){ 
   $('.1st').animate({'opacity': '0.9','z-index':'2'},1500,
   function(){$('.1st').animate({'opacity':'1','z-index':'2'})})});
   //$("#animate1").fadeIn().animate({'margin-bottom':'-3px','margin-left':'0px'},3000)
   $("#animate1").fadeIn().animate({'display':'inline-block'},3000)
   .fadeOut();}

   function ani2(){ $(".2nd").fadeIn().animate({'display':'inline-block'},1000,function(){
   $('.1st').animate({'opacity':'0.9'},1500,
   function(){$('.1st').animate({'opacity':'1'})})});  
   $(".2nd").fadeIn().animate({'display':'inline-block'},3000)
   .fadeOut();}

   function ani3(){ $('.3rd').fadeIn().animate({'display':'inline-block'},1000,function(){ 
   $('.1st').animate({'opacity': '0.9'},1500,
   function(){$('.1st').animate({'opacity':'1'})})});
   $('.3rd').fadeIn().animate({'display':'inline-block'},3000)
   .fadeOut();}

   function ani4(){ $('.4th').fadeIn().animate({'display':'inline-block'},1000,function(){ 
   $('.1st').animate({'opacity': '0.9'},1500,
   function(){$('.1st').animate({'opacity':'1'})})});
   $('.4th').fadeIn().animate({'display':'inline-block'},3000)
   .fadeOut();}

    var interval1=[ani1,ani2,ani3,ani4];
    var index =0;
    $(document).ready(function(){
              window.setInterval( function(){ 
                  interval1[index++ % interval1.length]()
                                     },8800);
        clearInterval(interval1);
                                });

目前，它可以成功用于桌面。现在，我想在CSS中编写我的所有四个函数，它们将逐个运行。那么，我们如何在CSS中为4个jquery函数设置动画，使其逐个运行而不重叠？

Answer 1

我认为您可以使用animation-delays来解决排序问题，但要注意CSS只会为数字属性设置动画，因此设置display属性的动画将不起作用。

如何在CSS中编写我的jquery函数以获得响应？

1 个答案: