A Little Bit of jQuery Animation

The third project introduced the idea behind click handlers in jQuery and using the animate method. The process involved learning how images are loaded along with how styles can be included and hidden until Javascript includes the images.

The whole script was relative small and involved six actions; mouseenter, mouseleave, mousedown, mouseup, keydown, and keyup. The first one would hide the still Ryu image and replace it with a looping gif of Ryu swaying in place.

1
2
3
4

$('.ryu').mouseenter(function() {
  $('.ryu-still').hide();
  $('.ryu-ready').show();
})

mouseleave would do the opposite and change the gif back to a still Ryu.

1
2
3
4

.mouseleave(function() {
  $('.ryu-ready').hide();
  $('.ryu-still').show();
})

mousedown animates the hadouken image, swap the ready image to Ryu throwing, and plays the sound script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.mousedown(function() {
  playHadouken();
  $('.ryu-ready').hide();
  $('.ryu-throwing').show();
  $('.hadouken').show();
  $('.hadouken').finish().show()
  .animate(
    {'left': '1020px'},
    500,
    function() {
      $(this).hide();
      $(this).css('left', '520px');
    }
  );
})

mouseup swaps the throwing Ryu image with the ready image/

1
2
3
4

.mouseup(function() {
  $('.ryu-throwing').hide();
  $('.ryu-ready').show();
});

keydown checks if the x key was pressed first and goes through if else statements to show which image to hide then show Ryu striking a pose

1
2
3
4
5
6
7
8
9
10
11
12

$(document).keydown(function(e) {
  if (88 == e.which) {
    if ($('.ryu-ready').is(':visible')){
      $('.ryu-ready').hide();
    } else if ( $($('.ryu-throwing').is(':visible')) ) {
      $('.ryu-throwing').hide();
    } else {
      $('.ryu-still').hide();
    }
    $('.ryu-cool').show();
  }
})

keyup does the opposite and hide Ryu striking a pose.

1
2
3
4
5
6
7
8
9
10

.keyup(function(e) {
  if (88 == e.which) {
    if ($('.ryu').mouseenter()) {
      $('.ryu-ready').show();
    } else {
      $('.ryu-still').show();
    }
    $('.ryu-cool').hide();
  }
});

During my first implementation of the project, I didn’t differentiate between the different images during the keydown event and it would produce multiple images when it was called. I’m not quite sure what was happening so I added the if else statements to check what state Ryu was in before continuing.

Comments