jQuery

【jQuery】ホバースライドアニメーションjQuery Hover Slider

August 18, 2016

jQuery Hover Sliderはスイングとリニアを使用したjQueryホバースライドアニメーション。

Code examples

$('.demo-1 ul').hoverSlider();

Default options

$('.demo-1 ul').hoverSlider({
        sliderClass     : 'hover-slider', // slider class name (your cap)
        activeElemClass : 'active',       // class name for active link
        speed           : 400,            // slider speed
        easing          : 'swing'         // animation easing
      });

CSS

        ul {
          position: relative; //parent must have position relative
        }

        .hover-slider {
          display: block;
          height: 2px;
          position: absolute;
          bottom: 0;
          background-color: #000;
          pointer-events: none;
        }

MITライセンス

Demo/Download