javascript - 如何在 CSS 中编写我的 jquery 函数以实现响应？

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 属性进行动画处理将不起作用。