jQuery CSS transition animation

Question

I am trying to animaiate a circle in a square motion animation using jQuery and css transition, for some reason only the last css jquery animtion works. i know i can accomplish a series of animations with jQuery animate function but i want to now if its possible to do it with css transition and jquery ,any suggestions how to fix it

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

David Woodfield · Accepted Answer · 2015-02-07 23:13:08Z

2

You are applying all of the css commands at the same time.

You could set them to happen in a timeline, for example...

Apply the first CSS command

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

Then set your next CSS command to run a set period of time afterwards...say 1 second (1000 milliseconds)

setTimeout(function() {

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

}, 1000);

Then perhaps wait another second for the next command (now 2 seconds)

 setTimeout(function() {

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

}, 2000);

And you could carry this on, remember to keep adding to the time.

Does this make sense?

answered Feb 7, 2015 at 23:13

David Woodfield

963 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery CSS transition animation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related