0

I am trying to create animation of letter, which on click will be moving up and shaking in the same time, and the end will disappear and show up in the middle of the screen covering 80% of a page. I managed to make it move up, but I am hopeless to make it shake, disappear and show up again.

I want it to:
1.moving up ,
2.turn left 10 degree ,
3.turn right 10 degree ,
4.turn left 10 degree ,
5.turn right 10 degree ,
6.fade ,
7.cover in shadow whole page ,
8.show letter in the middle of the page

Code so far:

$(document).ready(function() {

    $('.envelope').mouseover(function() {
        $(this).find('.list').addClass('listani');
    });

    $(".envelope").mouseout(function() {
        $(this).find('.list').removeClass('listani');
    });

    $('.envelope').click(function() {
        $(this).find('.list')
          .toggleClass("listmove");
    });

});

Link

2
  • Look into jQuery UI Effect.
    – Dom
    May 31, 2013 at 18:44
  • thanks, but is is to complicate for me. Could you tell me how it should to look like?
    – M-K
    May 31, 2013 at 19:45

1 Answer 1

0

Check this out: animate(), you can do all the effects you want using this. E.g. $('.element').animate({left: '+=10'}, 300);

2
  • thanks, but I am looking for effect like rotation(10deg) in CSS.
    – M-K
    May 31, 2013 at 19:44
  • Something like this: @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(10deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(10deg); } } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(10deg);} } And then you can use: .blah { -moz-animation: spin; -o-animation: spin; -webkit-animation: spin; animation: spin; } And add or remove classes like desired.
    – Jozeidon
    Jun 7, 2013 at 23:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.