2018年07月5日(木)

タブやナビゲーションがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装

• 0
• 40
• 40
• 116

  ...

  コンテンツ

  ...

var nav = $('nav');

var line = $('').addClass('line');

line.appendTo(nav);

var active = nav.find('.active');

var pos = 0;

var wid = 0;

if(active.length) {

  pos = active.position().left;

  wid = active.width();

  line.css({

    left: pos,

    width: wid

  });

}

nav.find('ul li a').click(function(e) {

  e.preventDefault();

  if(!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {

    

    nav.addClass('animate');...