jQuery CSS过渡动画

我想在使用jQuery和css过渡的方形动画动画中创建一个圆，出于某种原因只有最后一个CSS jquery动画才起作用。我知道我可以完成一系列的jQuery动画功能的动画，但我想现在如果可能的CSS过渡和jQuery做，有什么建议如何解决它jQuery CSS过渡动画

 $(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>

来源

2015-02-07 em33

你申请所有的CSS命令在同一时间。

你可以将它们放置在时间轴上发生，例如...

应用第一CSS命令

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

然后设置你的下一个CSS命令之后运行的设定时间。 ..say 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);

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

这是否有意义？

来源

2015-02-07 23:13:08

谢谢你的作品:) – em33 2015-02-10 18:21:09

jQuery CSS过渡动画

回答

相关问题