Rodomantsev
7/2/2015 - 8:04 AM

плавающая обводка меню

плавающая обводка меню

/*==========html==============*/
.menu_ellipsis  
    <script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
/*==========css==============*/
.pagination .menu_ellipsis {
  display: none;
  position: absolute;
  width: 100px;
  height: 27px;
  top: 0px;
  left: 0;
  border: 2px solid #74CCFF;
  border-radius: 14px;
  padding-right: 15px;
  z-index: -1;
  opacity: 0;
}
.pagination .menu_ellipsis.active{
  opacity: 1 !important;
}
/*===========css=============*/
/*============js============*/

 var mobile_scale = 1;
      var menu_ellipsis = $('.Gallery_super_wrapper .menu_ellipsis');

      function move_menu_ellipsis(el, delay) {
          if (el.length) {
              setTimeout(function() {
                  var newWidth = el.width() + 24,
                      newPos = el.position().left / mobile_scale,
                      time = menu_ellipsis.is(':visible') ? 500 : 0;
                  menu_ellipsis.stop(true).css({
                      'display': 'block'
                  }).transition({
                      'left': newPos,
                      'width': newWidth
                  }, time);
              }, 50);
          } else {
              menu_ellipsis.delay(delay).transition({
                  'opacity': 0
              }, 300, function() {
                  menu_ellipsis.hide();
              });
          }
      }

      $('.Gallery_pagination .swiper-pagination-bullet').hover(function() {
          move_menu_ellipsis($(this), 800)
      })
      $('.Gallery_pagination .swiper-pagination-bullet').hover(function() {
          $('.Gallery_super_wrapper .menu_ellipsis').addClass('active');
      })
      $('.Gallery_pagination .swiper-pagination-bullet').mouseout(function() {
          $('.Gallery_super_wrapper .menu_ellipsis').removeClass('active');
      })

      $('.Gallery_pagination ').mouseleave(function(event) {
          $('.Gallery_super_wrapper .menu_ellipsis').css('opacity', 0);
      });
/*===========js=============*/
/*===========js swiper=============*/

onInit: function(swiper) {
              $('.swiper-pagination.Gallery_pagination').append('<div class="menu_ellipsis"></div>')
          }

/*========================*/