jQuery CSS 过渡动画答案

【问题标题】：jQuery CSS transition animationjQuery CSS 过渡动画
【发布时间】：2015-02-08 07:13:08
【问题描述】：

我正在尝试使用 jQuery 和 css 过渡在方形运动动画中制作一个圆圈，由于某种原因，只有最后一个 css jquery animtion 有效。我知道我可以用 jQuery animate 函数完成一系列动画，但我现在想用 css 转换和 jquery 来完成，任何建议如何解决它

     $(document).ready(function(){

           $('h1').click(function(){
               if($('.container').hasClass('isMoved')){
                   $('.container').css({
                       '-webkit-transform': 'translatex(0px)',
                       'opacity' : '1'
                   });
                   $('.container').removeClass('isMoved')
               }else{
                   $('.container').css({
                       '-webkit-transform': 'translatex(350px) ',
                       'opacity' : '0.6'
                   });
                   $('.container').css({
                       '-webkit-transform': 'translatey(350px) ',
                       'opacity' : '0.6'
                   });
                   $('.container').css({
                       '-webkit-transform': 'translatex(0px) ',
                       'opacity' : '0.6'
                   });
                   $('.container').css({
                       '-webkit-transform': 'translatey(0px) ',
                       'opacity' : '0.6'
                   });
                   $('.container').addClass('isMoved');
               }

           });

       });

    <style>
    body{
        background-color:darkcyan;
    }   

    .container{
        width:100px;
        height:100px;
        border-radius: 100px;
        background-color:aquamarine;
        position:absolute;    
        -webkit-transition: all 2s ease-in-out;      
    }
</style>

</head>
 <body>
  <h1>Click</h1>
  <div class='container'>

</div>
</body>

【问题讨论】：

标签： jquery html css animation

【解决方案1】：

您正在同时应用所有 css 命令。

您可以将它们设置为在时间线中发生，例如...

应用第一个 CSS 命令

$('.container').css({
  '-webkit-transform': 'translatex(350px) ',
  'opacity' : '0.6'
});

然后将您的下一个 CSS 命令设置为在之后运行一段设定的时间......比如说 1 秒（1000 毫秒）

setTimeout(function() {

  $('.container').css({
   '-webkit-transform': 'translatey(350px) ',
   'opacity' : '0.6'
  });

}, 1000);

然后也许再等一秒等待下一个命令（现在是 2 秒）

 setTimeout(function() {

  $('.container').css({
   '-webkit-transform': 'translatex(0px) ',
   'opacity' : '0.6'
  });

}, 2000);

你可以继续这个，记得不断增加时间。

这有意义吗？

【讨论】：