jQuery CSS转换动画_Jquery_Html_Css_Animation

jQuery CSS转换动画

jquery html css animation

jQuery CSS转换动画,jquery,html,css,animation,Jquery,Html,Css,Animation,我正在尝试使用jQuery和css transition在方形运动动画中动画化一个圆，出于某种原因，只有最后的css jQuery动画才有效。我知道我可以用jQuery动画功能完成一系列的动画，但我现在想知道，如果可以用css转换和jQuery来完成，有什么建议可以修复它吗 $(document).ready(function(){ $('h1').click(function(){ if($('.container').hasCl

我正在尝试使用jQuery和css transition在方形运动动画中动画化一个圆，出于某种原因，只有最后的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>

$（文档）.ready（函数（）{
$（'h1'）。单击（函数（）{
if（$（'.container'）.hasClass（'isMoved'））{
$（'.container'）.css({
“-webkit转换”：“translatex（0px）”，
“不透明度”：“1”
});
$（'.container'）.removeClass（'isMoved'））
}否则{
$（'.container'）.css({
“-webkit转换”：“translatex（350px）”，
“不透明度”：“0.6”
});
$（'.container'）.css({
“-webkit transform”：“translatey（350px）”，
“不透明度”：“0.6”
});
$（'.container'）.css({
“-webkit转换”：“translatex（0px）”，
“不透明度”：“0.6”
});
$（'.container'）.css({
“-webkit转换”：“translatey（0px）”，
“不透明度”：“0.6”
});
$（'.container'）.addClass（'isMoved'）；
}
});
});
身体{
背景色：深黄色；
}   
.集装箱{
宽度：100px；
高度：100px；
边界半径：100px；
背景颜色：海蓝宝石；
位置：绝对位置；
-webkit转换：所有2个易于输入输出；
}
点击

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

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

应用第一个CSS命令

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

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

然后可能再等待一秒钟，等待下一个命令（现在为2秒）

你可以继续做下去，记住不断增加时间

这有意义吗

setTimeout(function() {

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

}, 1000);

 setTimeout(function() {

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

}, 2000);