jquery and css3 transition, navigation animation

navigation title transition

tired of creating class and add class name in your script file.

just directly using CSS3 transition like below.

div {
    opacity : 0;
    width   : 100px;
    height  : 100px;
    background : gold;
}
//
$('a').on('click', function () {
    $(this).next().css({
        opacity          : 1,
        WebkitTransition : 'opacity 1s ease-in-out',
        MozTransition    : 'opacity 1s ease-in-out',
        MsTransition     : 'opacity 1s ease-in-out',
        OTransition      : 'opacity 1s ease-in-out',
        transition       : 'opacity 1s ease-in-out'
    });
});

#script

1. scroll event.

$(window).scroll(function() {
    if ($(document).scrollTop() > h1Pos.top) {
      nav.css({
        opacity          : 1,
        WebkitTransition : 'opacity 0.3s ease-in-out',
        MozTransition    : 'opacity 0.3s ease-in-out',
        MsTransition     : 'opacity 0.3s ease-in-out',
        OTransition      : 'opacity 0.3s ease-in-out',
        transition       : 'opacity 0.3s ease-in-out'
      });
    } else {
      nav.css({
        opacity          : 0,
        WebkitTransition : 'opacity 0.3s ease-in-out',
        MozTransition    : 'opacity 0.3s ease-in-out',
        MsTransition     : 'opacity 0.3s ease-in-out',
        OTransition      : 'opacity 0.3s ease-in-out',
        transition       : 'opacity 0.3s ease-in-out'
      });
    }
  });

#ref

-https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_scrolltop_class