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過渡動畫

回答

相關問題