javascript_css_animation.md

CSS Positioning strategies

• inherit: use position value of container
• static: normal layout (top left? default)
• relative: offests from normal layout position
• fixed: fixed position
• absolute: offsets from the nearest container with a position attribute other than static

CSS Attributes

• more convenient to use css method rather than updating the style using attr

$('#list-item-1').css('background-color', 'red');

• exercise: move 10 px to the right when click on rocket

$('#rocket').on('click', function(){
    var current = parseInt($(this).css('left'));
        
    $(this).css('left', (current + 10) + 'px') ;
    
})

• exercise: move rocket to the position of the cursor when click on page

$(document).click( function(e) {
   $('#rocket').css({'top':e.pageY, 'left':e.pageX});
});  

Transition

• transition: [attribute] [duration]

#rocket{
  transition: opacity 0.5s, width 0.5s,left 0.5s ;
}
#rocket.click{
  opacity: 0;
}

#rocket.btn-1{
  width: 100px;
}

#rocket.btn-2{
  left: 100px;
}

  $('#button-1').on("click", function(e){
    $('#rocket').toggleClass('btn-1');
  });

  $('#button-2').on("click", function(e){
    $('#rocket').toggleClass('btn-2');
  });

  $('#rocket').on("click", function(e){
    $('#rocket').toggleClass('click');
  });

draggable, droppable

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Coffee Script

• WORST THING EVER