Question

我正在尝试使用jQuery和css过渡动画一个方形动画动画中的圆圈，出于某种原因，只有最后一个css jquery动画才有效。我知道我可以使用jQuery动画功能完成一系列动画，但我想现在如果它可以用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>

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

你可以随身携带，记得继续增加时间。

这有意义吗？

jQuery CSS过渡动画

1 个答案: